This is blocks of skeleton code
........ code cut here ...
<head>
<meta charset="utf-8" />
<title>Simple Terrain with Mouse Control</title>
<meta name="generator" content="BBEdit 10.5" />
<!-- load javascript helper code here --!>
<script type="text/javascript" src="glMatrix_util.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="mouse_util.js"></script>
<!-- define our shaders -->
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
varying vec4 vertexLightColor;
void main(void) {
// you have to add in lighting to this
// how could you use colorLight here to do that?
gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec2 vTextureCoord;
varying vec3 nVertexPosition;
uniform sampler2D uSampler;
varying vec4 clrVec;
varying vec4 nclrVec;
// lighting code
vec4 lightColor = [1.0,0.0,0.0, 1.0]; // a red light
vec4 lightDirection = [0.0,-1.0,0.0, 1.0]; // light is straight down
varying vec4 vertexLightColor; // the calcualed lighting color
void main(void) {
nVertexPosition[0] = aVertexPosition[0];
nVertexPosition[1] = 0.5;
nVertexPosition[2] = aVertexPosition[2];
vTextureCoord = aTextureCoord;
clrVec = texture2D(uSampler,vTextureCoord);
nclrVec = normalize(clrVec);
nVertexPosition[1] = nclrVec[0]*nclrVec[0] + nclrVec[1]*nclrVec[1]+nclrVec[2]*nclrVec[2];
gl_Position = uPMatrix * uMVMatrix * vec4(nVertexPosition, 1.0);
//in here you need to calculate a light color for this vertex
// how do we caclulate a light color.
// vertexLightColor = lightColor would set the color but would be really simple.
// direction light pseudo code: we need a normal her, were do get the normal?
// normal = [0,1,0] as a test value: best if normal comes from attribute
vertexLightColor = lightColor * dot(aVertexNormal, lightDirection);
}
</script>
<script> <!-- define Javascript functions for drawing WebGL items -->
var gl;
function initWebGLContext(aname) {
gl = null;
var canvas = document.getElementById(aname);
try {
// Try to grab the standard context. If it fails, fallback to experimental.
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// If we don't have a GL context, give up now
if (!gl) {
alert("Unable to initialize WebGL. Your browser may not support it.");
gl = null;
}
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
return gl;
}
// define the function to initial WebGL and Setup Geometry Objects
function initGLScene()
{
// Initialize the WebGL Context - the gl engine for drawing things.
var gl = initWebGLContext("hellowebgl"); // The id of the Canvas Element
if (!gl) // if fails simply return
{
return;
}
// succeeded in initializing WebGL system
return gl;
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
var shaderProgram;
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
}
// create our basic model and view matrix
var mvMatrix = mat4.create();
var mvMatrixStack = [];
// create our projection matrix for projecting from 3D to 2D.
var pMatrix = mat4.create();
function mvPushMatrix() {
var copy = mat4.create();
mat4.set(mvMatrix, copy);
mvMatrixStack.push(copy);
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
}
function setMatrixUniforms()
{
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
// create and initialize our geometry objects
var terVertexPositionBuffer;
var terVertexTextureCoordBuffer;
var terVertexIndexBuffer;
var terNormalBuffer;
function initGeometry()
{
terVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, terVertexPositionBuffer);
vertices = [];
nvertices = [];
// create a 100 by 100 grid
for ( i=0; i < 100; i++)
{
for (j = 0; j < 100; j++)
{
vertices[0 + j*3 + i*100*3] = (j*1.0)/50.0 -1.0; // handle X index
vertices[1 + .....] = .... you fill this in with Y
vertices[2 + .....] = .... you fill this in with Z
nvertices[0 + ...] = 0.0;
nvertices[1 + ...] = 1.0; // create normals what is this normal?
nvertices[2 + ...] = 0.0;
}
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
terVertexPositionBuffer.itemSize = 3;
terVertexPositionBuffer.numItems = 100*100;
terNormalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, terNormalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(nvertices), gl.STATIC_DRAW);
terNormalBuffer.itemSize = 3;
terNormalBuffer.numItems = 100*100;
terVertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, terVertexTextureCoordBuffer);
textureCoords = [];
tc = 0;
// calculate s & t texture coordinates
for ( i=0; i < 100; i++)
{
for (j = 0; j < 100; j++)
{
textureCoords[tc++] = 0.0 + (j*1.0)/100.0;
textureCoords[tc++] = 0.0 + (i*1.0)/100.0;
}
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
terVertexTextureCoordBuffer.itemSize = 2;
terVertexTextureCoordBuffer.numItems = tc;
terVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, terVertexIndexBuffer);
terVertexIndices = [];
tvi = 0;
// calculate the vertex numbers for the geometry
for ( i=0; i < 99; i++)
{
for (j = 0; j < 99; j++)
{
terVertexIndices[tvi++] = 0+j+i*100;
terVertexIndices[tvi++] = 1+j+i*100;
terVertexIndices[tvi++] = 0+j+(i+1)*100;
terVertexIndices[tvi++] = ... you figure this out
terVertexIndices[tvi++] = ... you figure this out
terVertexIndices[tvi++] = ... you figure this out
}
}
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(terVertexIndices), gl.STATIC_DRAW);
terVertexIndexBuffer.itemSize = 1;
terVertexIndexBuffer.numItems = tvi;
}
.... handle textures in here ....
//Initialize everything for starting up a simple webGL application
function startHelloWebGL()
{
// first initialize webgl components
var gl = initGLScene();
// now build basic geometry objects.
initShaders();
initGeometry();
initTextures();
gl.clearColor(0.4,0.4,0.4,1.0);
gl.enable(gl.DEPTH_TEST);
// set mouse handlers for controlling rotation
var acanvas = document.getElementById("hellowebgl");
acanvas.onmousedown = handleMouseDown;
document.onmouseup = handleMouseUp; // handle when mouse moves out of canvas
document.onmousemove = handleMouseMove;
// Draw the Scene
Frames();
// If doing an animation need to add code to rotate our geometry
}
// This function draws a basic webGL scene
// first it clears the framebuffer.
// then we define our View positions for our camera using WebGL matrices.
// OpenGL has convenience methods for this such as glPerspective().
// finally we call the gl draw methods to draw our defined geometry objects.
var xRot = 0;
var yRot = 0;
var zRot = 0;
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// set up the projection matrix
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
// handle the mouse controlled object rotation This transforms the model matrix by the mouse handler
mat4.multiply(mvMatrix,objRotationMatrix);
// draw our primitives
gl.bindBuffer(gl.ARRAY_BUFFER, terVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, terVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, terVertexTextureCoordBuffer);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, terVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, exTexture);
gl.uniform1i(shaderProgram.samplerUniform, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, terVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, terVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
}
....... more code ....
</script>
</head>
<!-- declare the "body" of the HTML document-->
.... your canvas html tags go hear.....