1.1 --- a/machine.html Fri Apr 29 17:10:15 2011 +0200
1.2 +++ b/machine.html Sat Apr 30 04:05:47 2011 +0200
1.3 @@ -12,12 +12,16 @@
1.4 #endif
1.5
1.6 varying vec4 vColour;
1.7 + varying vec2 vTextureCoord;
1.8 varying vec3 vTransformedNormal;
1.9 varying vec4 vPosition;
1.10
1.11 uniform float uMaterialShininess;
1.12
1.13 uniform bool uUseLighting;
1.14 + uniform bool uUseTexture;
1.15 +
1.16 + uniform sampler2D uSampler;
1.17
1.18 uniform vec3 uAmbientColour;
1.19 uniform vec3 uPointLightingLocation;
1.20 @@ -41,8 +45,16 @@
1.21 float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0);
1.22 lightWeighting = uAmbientColour + uPointLightingSpecularColour * specularLightWeighting
1.23 + uPointLightingDiffuseColour * diffuseLightWeighting;
1.24 - }
1.25 - gl_FragColor = vec4(vColour.rgb * lightWeighting, vColour.a);
1.26 + }
1.27 + if (uUseTexture)
1.28 + {
1.29 + vec4 colour = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
1.30 + gl_FragColor = vec4(colour.rgb * lightWeighting, colour.a);
1.31 + }
1.32 + else
1.33 + {
1.34 + gl_FragColor = vec4(vColour.rgb * lightWeighting, vColour.a);
1.35 + }
1.36 }
1.37 </script>
1.38
1.39 @@ -50,12 +62,14 @@
1.40 attribute vec3 aVertexPosition;
1.41 attribute vec3 aVertexNormal;
1.42 attribute vec4 aVertexColour;
1.43 + attribute vec2 aTextureCoord;
1.44
1.45 uniform mat4 uMVMatrix;
1.46 uniform mat4 uPMatrix;
1.47 uniform mat3 uNMatrix;
1.48
1.49 varying vec4 vColour;
1.50 + varying vec2 vTextureCoord;
1.51 varying vec3 vTransformedNormal;
1.52 varying vec4 vPosition;
1.53
1.54 @@ -64,6 +78,7 @@
1.55 vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
1.56 gl_Position = uPMatrix * vPosition;
1.57 vColour = aVertexColour;
1.58 + vTextureCoord = aTextureCoord;
1.59 vTransformedNormal = uNMatrix * aVertexNormal;
1.60 }
1.61 </script>
2.1 --- a/scripts/cube.js Fri Apr 29 17:10:15 2011 +0200
2.2 +++ b/scripts/cube.js Sat Apr 30 04:05:47 2011 +0200
2.3 @@ -20,9 +20,11 @@
2.4 for (var id in this.children) this.children[id].update(time);
2.5 }
2.6
2.7 -function CubeVbo(size, context)
2.8 +function CubeVbo(size, context, texture)
2.9 {
2.10 var gl = context.gl;
2.11 + this.texture = texture;
2.12 + this.useTexture = texture;
2.13 this.size = size || 1;
2.14 this.positionBuffer = gl.createBuffer();
2.15 gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
2.16 @@ -102,6 +104,45 @@
2.17 this.normalBuffer.itemSize = 3;
2.18 this.normalBuffer.numItems = 24;
2.19
2.20 + //if (this.texture)
2.21 + //{
2.22 + this.textureCoordBuffer = gl.createBuffer();
2.23 + gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer);
2.24 + var textureCoords = [// front face
2.25 + 0.0, 0.0,
2.26 + 1.0, 0.0,
2.27 + 1.0, 1.0,
2.28 + 0.0, 1.0,
2.29 + //back face
2.30 + 1.0, 0.0,
2.31 + 1.0, 1.0,
2.32 + 0.0, 1.0,
2.33 + 0.0, 0.0,
2.34 + // top face
2.35 + 0.0, 1.0,
2.36 + 0.0, 0.0,
2.37 + 1.0, 0.0,
2.38 + 1.0, 1.0,
2.39 + // bottom face
2.40 + 1.0, 1.0,
2.41 + 0.0, 1.0,
2.42 + 0.0, 0.0,
2.43 + 1.0, 0.0,
2.44 + // right face
2.45 + 1.0, 0.0,
2.46 + 1.0, 1.0,
2.47 + 0.0, 1.0,
2.48 + 0.0, 0.0,
2.49 + // left face
2.50 + 0.0, 0.0,
2.51 + 1.0, 0.0,
2.52 + 1.0, 1.0,
2.53 + 0.0, 1.0];
2.54 + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
2.55 + this.textureCoordBuffer.itemSize = 2;
2.56 + this.textureCoordBuffer.numItems = 24;
2.57 + //}
2.58 +
2.59 this.colourBuffer = gl.createBuffer();
2.60 gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer);
2.61 var alpha = 1.0;
2.62 @@ -125,7 +166,7 @@
2.63 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColours), gl.STATIC_DRAW);
2.64 this.colourBuffer.itemSize = 4;
2.65 this.colourBuffer.numItems = 24;
2.66 -
2.67 +
2.68 this.indexBuffer = gl.createBuffer();
2.69 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
2.70 var indices = [0, 1, 2, 0, 2, 3,
3.1 --- a/scripts/machine.js Fri Apr 29 17:10:15 2011 +0200
3.2 +++ b/scripts/machine.js Sat Apr 30 04:05:47 2011 +0200
3.3 @@ -1,5 +1,6 @@
3.4 var machine;
3.5 var renderer;
3.6 +var gl;
3.7 var controller;
3.8 var camera;
3.9 var cameraSpeed = {"h": 1.0, "v": 1.0, "zoom": 1.0, "pitch": 1.0, "yaw": 1.0, "roll": 1.0};
3.10 @@ -20,7 +21,7 @@
3.11 var canvas = document.getElementById("machine");
3.12 var context = new Context(canvas);
3.13 context.expand();
3.14 - var gl = context.gl;
3.15 + gl = context.gl;
3.16 var scene = createScene(context);
3.17 gl.clearColor(0.00, 0.0, 0.0, 1.0);
3.18 gl.enable(gl.DEPTH_TEST);
3.19 @@ -39,10 +40,34 @@
3.20 //read("config/camera", configureCamera);
3.21 }
3.22
3.23 +var textures = [];
3.24 +
3.25 +function Texture(file)
3.26 +{
3.27 + this.id = textures.length;
3.28 + textures.push(this);
3.29 + this.hnd = gl.createTexture();
3.30 + this.image = new Image();
3.31 + this.image.onload = function() { handleLoadedTexture(); }
3.32 + this.image.src = file;
3.33 +}
3.34 +
3.35 +function handleLoadedTexture()
3.36 +{
3.37 + var texture = textures[textures.length-1];
3.38 + gl.bindTexture(gl.TEXTURE_2D, texture.hnd);
3.39 + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
3.40 + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
3.41 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
3.42 + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
3.43 + gl.bindTexture(gl.TEXTURE_2D, null);
3.44 +}
3.45 +
3.46 function createScene(context)
3.47 {
3.48 var size = 1;
3.49 - var vbo = new CubeVbo(size, context);
3.50 + var texture = new Texture("textures/nehe.gif");
3.51 + var vbo = new CubeVbo(size, context, texture);
3.52 var scene = new Node([0, 0, 0], [0, 0, 0], new Cube(vbo));
3.53 var dim = 10;
3.54 var d = size * 4;
4.1 --- a/scripts/renderer.js Fri Apr 29 17:10:15 2011 +0200
4.2 +++ b/scripts/renderer.js Sat Apr 30 04:05:47 2011 +0200
4.3 @@ -65,11 +65,16 @@
4.4 this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");
4.5 gl.enableVertexAttribArray(this.vertexColour);
4.6
4.7 + this.textureCoord = gl.getAttribLocation(this.program, "aTextureCoord");
4.8 + gl.enableVertexAttribArray(this.textureCoord);
4.9 +
4.10 this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
4.11 this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
4.12 this.nMatrixUniform = gl.getUniformLocation(this.program, "uNMatrix");
4.13 + this.samplerUniform = gl.getUniformLocation(this.program, "uSampler");
4.14 this.materialShininessUniform = gl.getUniformLocation(this.program, "uMaterialShininess");
4.15 this.useLightingUniform = gl.getUniformLocation(this.program, "uUseLighting");
4.16 + this.useTexture = gl.getUniformLocation(this.program, "uUseTexture");
4.17 this.ambientColourUniform = gl.getUniformLocation(this.program, "uAmbientColour");
4.18 this.lightingDirectionUniform = gl.getUniformLocation(this.program, "uLightingDirection");
4.19 this.directionalColourUniform = gl.getUniformLocation(this.program, "uDirectionalColour");
4.20 @@ -185,6 +190,21 @@
4.21 gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
4.22 gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
4.23
4.24 + gl.bindBuffer(gl.ARRAY_BUFFER, object.textureCoordBuffer);
4.25 + gl.vertexAttribPointer(shader.textureCoord, object.textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
4.26 + gl.activeTexture(gl.TEXTURE0);
4.27 + if (object.texture && object.useTexture)
4.28 + {
4.29 + gl.uniform1i(shader.useTexture, true);
4.30 +
4.31 + gl.bindTexture(gl.TEXTURE_2D, object.texture.hnd);
4.32 + gl.uniform1i(shader.samplerUniform, 0);
4.33 + }
4.34 + else
4.35 + {
4.36 + gl.uniform1i(shader.useTexture, false);
4.37 +
4.38 + }
4.39 gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
4.40 gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
4.41