index.html
html · 52 lines · part of Fragment Shader Framework · raw
<html>
<title>WebGL Fragment Shader Canvas</title>
<script src="webgl_fragment_framework.001.js"></script>
<script id="shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
varying vec3 vPosition;
uniform float uTime;
uniform vec2 uMousePos;
void main(void)
{
float r = 0.5 + 0.5 * vPosition.x;
float g = 0.5 + 0.5 * vPosition.y;
float b = 0.5 + 0.5 * sin( uTime );
gl_FragColor = vec4( r, g, b, 1.0 );
}
</script>
<body onload="webgl_init( 'canvas', 'shader', 'status' )" bgcolor="#000000">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"><tr><td align="center" valign="middle">
<table cellspacing="0" cellpadding="0" border="0" width="200">
<tr>
<td style="padding:8px;background:#555555;color:#FFFFFF;font-family:arial;font-size:11px;font-weight:bold">
<div>WebGL Fragment Shader Test</div>
</td>
</tr>
<tr>
<td><canvas id="canvas" width="200" height="200" style="border:5px solid #FFFFFF"></canvas></td>
</tr><tr>
<td style="padding:8px;background:#555555;color:#FFFFFF;font-family:arial;font-size:11px;font-weight:bold">
<div id="status"> </div>
</td>
</tr>
</table>
</td></tr></table>
</body>
</html>