alchemist/index.html
lhark a3979b9300 Ajout de transformations, css bootstrap
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.
2017-12-09 23:53:20 -05:00

104 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>