71 lines
2.1 KiB
HTML
71 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>
|