Okay, this snippet seems pretty straight4ward, still, it reports that gl is not defined...
Can someone shed some light here?
Thanks;;
--------------------------------------
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>step 3.5.1</title>
<link rel="stylesheet" href="css/styles2.css" type="text/css" charset="utf-8" /></link>
<script type="text/javascript" src="js/page-utils01.js"></script>
<script id="vshader" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;
uniform vec3 uLightPosition;
varying vec3 vNormal;
varying vec3 vLightRay;
varying vec3 vEyeVec;
void main(void) {
//Transformed vertex position
vec4 vertex = uMVMatrix * vec4(aVertexPosition, 1.0);
//Transformed normal position
vNormal = vec3(uNMatrix * vec4(aVertexNormal, 1.0));
//Transformed light position
vec4 light = uMVMatrix * vec4(uLightPosition,1.0);
// Light position
vLightRay = vertex.xyz-light.xyz;
//Vector Eye
vEyeVec = -vec3(vertex.xyz);
//Final vertex position
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script id="fshader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uLightAmbient;
uniform vec4 uLightDiffuse;
uniform vec4 uLightSpecular;
uniform vec4 uMaterialAmbient;
uniform vec4 uMaterialDiffuse;
uniform vec4 uMaterialSpecular;
uniform float uShininess;
varying vec3 vNormal;
varying vec3 vLightRay;
varying vec3 vEyeVec;
void main(void)
{
vec3 L = normalize(vLightRay);
vec3 N = normalize(vNormal);
//Lambert's cosine law
float lambertTerm = dot(N,-L);
//Ambient Term
vec4 Ia = uLightAmbient * uMaterialAmbient;
//Diffuse Term
vec4 Id = vec4(0.0,0.0,0.0,1.0);
//Specular Term
vec4 Is = vec4(0.0,0.0,0.0,1.0);
if(lambertTerm > 0.0)
{
Id = uLightDiffuse * uMaterialDiffuse * lambertTerm;
vec3 E = normalize(vEyeVec);
vec3 R = reflect(L, N);
float specular = pow( max(dot(R, E), 0.0), uShininess);
Is = uLightSpecular * uMaterialSpecular * specular;
}
//Final color
vec4 finalColor = Ia + Id + Is;
finalColor.a = 1.0;
gl_FragColor = finalColor;
}
</script>
<script type="text/javascript">
var gl = null;
function setupWebGL()
{
canvas = document.getElementById("my-canvas");
gl = getGLContext(canvas);
initViewPort(gl, canvas);
initShaders();
}
function initShaders()
{
// get the sources
}
function makeShader(src, type)
{
{
}
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
{
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
}
return shader;
}
function initViewPort(gl, canvas)
{
gl.viewport(0,0,canvas.width, canvas.height);
}
</script>
</head>
<body onload="setupWebGL();">
<canvas id="my-canvas" name="my-canvas" width="400" height="300">
Your browser does not support the HTML5 canvas element.
</canvas>
</body>
</html>
The lib linked in is only to declare some vars and for the code of the error handler...
Thanks in advance...
Thunder
