# HG changeset patch # User Eugen Sawin # Date 1304129147 -7200 # Node ID a828c4cde5b3bd34f3179dea029e1e12c7328723 # Parent 7769f6e1e2c554195757fa8ce97ebad4dde23f0e Added optional texturing. diff -r 7769f6e1e2c5 -r a828c4cde5b3 machine.html --- a/machine.html Fri Apr 29 17:10:15 2011 +0200 +++ b/machine.html Sat Apr 30 04:05:47 2011 +0200 @@ -12,12 +12,16 @@ #endif varying vec4 vColour; + varying vec2 vTextureCoord; varying vec3 vTransformedNormal; varying vec4 vPosition; uniform float uMaterialShininess; uniform bool uUseLighting; + uniform bool uUseTexture; + + uniform sampler2D uSampler; uniform vec3 uAmbientColour; uniform vec3 uPointLightingLocation; @@ -41,8 +45,16 @@ float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0); lightWeighting = uAmbientColour + uPointLightingSpecularColour * specularLightWeighting + uPointLightingDiffuseColour * diffuseLightWeighting; - } - gl_FragColor = vec4(vColour.rgb * lightWeighting, vColour.a); + } + if (uUseTexture) + { + vec4 colour = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); + gl_FragColor = vec4(colour.rgb * lightWeighting, colour.a); + } + else + { + gl_FragColor = vec4(vColour.rgb * lightWeighting, vColour.a); + } } @@ -50,12 +62,14 @@ attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec4 aVertexColour; + attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; varying vec4 vColour; + varying vec2 vTextureCoord; varying vec3 vTransformedNormal; varying vec4 vPosition; @@ -64,6 +78,7 @@ vPosition = uMVMatrix * vec4(aVertexPosition, 1.0); gl_Position = uPMatrix * vPosition; vColour = aVertexColour; + vTextureCoord = aTextureCoord; vTransformedNormal = uNMatrix * aVertexNormal; } diff -r 7769f6e1e2c5 -r a828c4cde5b3 scripts/cube.js --- a/scripts/cube.js Fri Apr 29 17:10:15 2011 +0200 +++ b/scripts/cube.js Sat Apr 30 04:05:47 2011 +0200 @@ -20,9 +20,11 @@ for (var id in this.children) this.children[id].update(time); } -function CubeVbo(size, context) +function CubeVbo(size, context, texture) { var gl = context.gl; + this.texture = texture; + this.useTexture = texture; this.size = size || 1; this.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); @@ -102,6 +104,45 @@ this.normalBuffer.itemSize = 3; this.normalBuffer.numItems = 24; + //if (this.texture) + //{ + this.textureCoordBuffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, this.textureCoordBuffer); + var textureCoords = [// front face + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + //back face + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + 0.0, 0.0, + // top face + 0.0, 1.0, + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + // bottom face + 1.0, 1.0, + 0.0, 1.0, + 0.0, 0.0, + 1.0, 0.0, + // right face + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0, + 0.0, 0.0, + // left face + 0.0, 0.0, + 1.0, 0.0, + 1.0, 1.0, + 0.0, 1.0]; + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW); + this.textureCoordBuffer.itemSize = 2; + this.textureCoordBuffer.numItems = 24; + //} + this.colourBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer); var alpha = 1.0; @@ -125,7 +166,7 @@ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColours), gl.STATIC_DRAW); this.colourBuffer.itemSize = 4; this.colourBuffer.numItems = 24; - + this.indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); var indices = [0, 1, 2, 0, 2, 3, diff -r 7769f6e1e2c5 -r a828c4cde5b3 scripts/machine.js --- a/scripts/machine.js Fri Apr 29 17:10:15 2011 +0200 +++ b/scripts/machine.js Sat Apr 30 04:05:47 2011 +0200 @@ -1,5 +1,6 @@ var machine; var renderer; +var gl; var controller; var camera; var cameraSpeed = {"h": 1.0, "v": 1.0, "zoom": 1.0, "pitch": 1.0, "yaw": 1.0, "roll": 1.0}; @@ -20,7 +21,7 @@ var canvas = document.getElementById("machine"); var context = new Context(canvas); context.expand(); - var gl = context.gl; + gl = context.gl; var scene = createScene(context); gl.clearColor(0.00, 0.0, 0.0, 1.0); gl.enable(gl.DEPTH_TEST); @@ -39,10 +40,34 @@ //read("config/camera", configureCamera); } +var textures = []; + +function Texture(file) +{ + this.id = textures.length; + textures.push(this); + this.hnd = gl.createTexture(); + this.image = new Image(); + this.image.onload = function() { handleLoadedTexture(); } + this.image.src = file; +} + +function handleLoadedTexture() +{ + var texture = textures[textures.length-1]; + gl.bindTexture(gl.TEXTURE_2D, texture.hnd); + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.bindTexture(gl.TEXTURE_2D, null); +} + function createScene(context) { var size = 1; - var vbo = new CubeVbo(size, context); + var texture = new Texture("textures/nehe.gif"); + var vbo = new CubeVbo(size, context, texture); var scene = new Node([0, 0, 0], [0, 0, 0], new Cube(vbo)); var dim = 10; var d = size * 4; diff -r 7769f6e1e2c5 -r a828c4cde5b3 scripts/renderer.js --- a/scripts/renderer.js Fri Apr 29 17:10:15 2011 +0200 +++ b/scripts/renderer.js Sat Apr 30 04:05:47 2011 +0200 @@ -65,11 +65,16 @@ this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour"); gl.enableVertexAttribArray(this.vertexColour); + this.textureCoord = gl.getAttribLocation(this.program, "aTextureCoord"); + gl.enableVertexAttribArray(this.textureCoord); + this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix"); this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix"); this.nMatrixUniform = gl.getUniformLocation(this.program, "uNMatrix"); + this.samplerUniform = gl.getUniformLocation(this.program, "uSampler"); this.materialShininessUniform = gl.getUniformLocation(this.program, "uMaterialShininess"); this.useLightingUniform = gl.getUniformLocation(this.program, "uUseLighting"); + this.useTexture = gl.getUniformLocation(this.program, "uUseTexture"); this.ambientColourUniform = gl.getUniformLocation(this.program, "uAmbientColour"); this.lightingDirectionUniform = gl.getUniformLocation(this.program, "uLightingDirection"); this.directionalColourUniform = gl.getUniformLocation(this.program, "uDirectionalColour"); @@ -185,6 +190,21 @@ gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer); gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0); + gl.bindBuffer(gl.ARRAY_BUFFER, object.textureCoordBuffer); + gl.vertexAttribPointer(shader.textureCoord, object.textureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); + gl.activeTexture(gl.TEXTURE0); + if (object.texture && object.useTexture) + { + gl.uniform1i(shader.useTexture, true); + + gl.bindTexture(gl.TEXTURE_2D, object.texture.hnd); + gl.uniform1i(shader.samplerUniform, 0); + } + else + { + gl.uniform1i(shader.useTexture, false); + + } gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer); gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);