a3979b9300
Les fichiers de resources ont été bougés dans leur dossiers propres (css, js, fonts). La position de la souris dans le canvas est maintenant correcte quelle que soit la position du canvas dans la page.
105 lines
3.9 KiB
HTML
105 lines
3.9 KiB
HTML
<!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/J3DIMath.js"></script>
|
|
<script type="text/javascript" src="js/gl-matrix-min.js"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
|
</html>
|