alchemist/index.html
2017-10-23 14:31:42 -04:00

70 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TP - WebGL</title>
<link rel="stylesheet" href="tp.css" type="text/css" media="all">
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="webgl-debug.js"></script>
<script type="text/javascript" src="J3DI.js"></script>
<script type="text/javascript" src="J3DIMath.js"></script>
<script type="text/javascript" src="main.js"></script>
<script id="nuanceurSommets" type="x-shader/x-vertex">
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
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 = u_modelViewProjMatrix * 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()">
<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>
</body>
</html>