GL not found...but it's there...there!!!
Posted: Wed Aug 21, 2013 6:33 pm
Hey gang,
Okay, this snippet seems pretty straight4ward, still, it reports that gl is not defined...
Can someone shed some light here?
Thanks;;
----------------------------------------------------------------------------
The lib linked in is only to declare some vars and for the code of the error handler...
Thanks in advance...
Thunder
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
