You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.7 KiB
101 lines
3.7 KiB
<!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>
|
|
|