<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alchemist</title>
<link rel="stylesheet" href="css/tp.css" type="text/css" media="all">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<script id="nuanceurSommets" type="x-shader/x-vertex">
uniform mat4 mmodel;
uniform mat4 mview;
uniform mat4 mproj;
uniform vec3 lightDir;
attribute vec4 vPosition;
attribute vec4 vColor;
varying float v_NdotL;
varying vec4 v_color;
void main()
{
// assigner la position du sommet
gl_Position = mproj * mview * mmodel * vPosition;
//gl_Position = mmodel * mview * mproj * vPosition;
// assigner les coordonnées de texture
v_color = vColor;
}
</script>
<script id="nuanceurFragments" type="x-shader/x-fragment">
// informer du degré de précision qu'on veut dans les calculs
// (Plus à ce sujet: http://stackoverflow.com/questions/5366416/in-opengl-es-2-0-glsl-where-do-you-need-precision-specifiers/6336285#6336285 )
precision mediump float;
uniform sampler2D laTexture;
uniform vec2 positionSouris;
varying float v_NdotL;
varying vec4 v_color;
void main()
{
// obtenir la couleur de la texture
vec4 coul = v_color;
if ( length( positionSouris - gl_FragCoord.xy ) < 50.0 )
{
vec4 coulCercle = vec4( 1.0, 0.0, 0.0, 0.7 );
coul = coul * (1.0-coulCercle.a) + coulCercle * coulCercle.a;
// coul = coul * coulCercle; // réponse aussi acceptée
}
gl_FragColor = vec4( coul.rgb, coul.a );
}
</script>
</head>
<body onload="TPdebut()">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<table class="table" id="trans-list">
<thead>
<th class="text-center">T</th>
<th class="text-center">x</th>
<th class="text-center">y</th>
<th class="text-center">z</th>
<th class="text-center">𝜃(°)</th>
<th></th>
</thead>
<tbody>
</tbody>
</table>
<button type="button" class="btn btn-success btn-sm" onclick="addTransformation(this, 'rotation'); return false">
<span class="glyphicon glyphicon-repeat"></span> Rotation
</button>
<button type="button" class="btn btn-success btn-sm" onclick="addTransformation(this, 'translation'); return false">
<span class="glyphicon glyphicon-move"></span> Translation
</button>
<button type="button" class="btn btn-success btn-sm" onclick="addTransformation(this, 'scale'); return false">
<span class="glyphicon glyphicon-resize-small"></span> Échelle
</button>
</div>
<div class="col-md-7">
<canvas class="canevas" id="tp-canevas" height="600" width="900">
Si vous voyez ceci, votre navigateur ne supporte pas webgl.
</canvas>
<div class="text">Les <a href="http://www.khronos.org/registry/webgl/specs/latest/1.0/">spécifications de Webgl</a> sont<br>remplies d'informations intéressantes.</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/webgl-debug.js"></script>
<script type="text/javascript" src="js/J3DI.js"></script>
<script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>