| <!DOCTYPE html> |
| <!-- |
| /* |
| * Copyright (C) 2009 Apple Inc. All Rights Reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY |
| * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
| * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR |
| * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
| * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, |
| * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR |
| * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY |
| * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| --> |
| <html> |
| <head> |
| <title>Teapot (per-vertex)</title> |
| <script src="resources/J3DI.js"> </script> |
| <script src="resources/J3DIMath.js" type="text/javascript"> </script> |
| <script id="vshader" type="x-shader/x-vertex"> |
| /* |
| Copyright (c) 2008 Seneca College |
| Licenced under the MIT License (http://www.c3dl.org/index.php/mit-license/) |
| */ |
| |
| // We need to create our own light structure since we can't access |
| // the light() function in the 2.0 context. |
| struct Light |
| { |
| vec4 ambient; |
| vec4 diffuse; |
| vec4 specular; |
| vec4 position; |
| |
| vec3 halfVector; |
| }; |
| |
| struct Material |
| { |
| vec4 emission; |
| vec4 ambient; |
| vec4 diffuse; |
| vec4 specular; |
| float shininess; |
| }; |
| |
| // |
| // vertex attributes |
| // |
| attribute vec3 a_normal; |
| attribute vec4 a_texCoord; |
| attribute vec4 a_vertex; |
| |
| // for every model we multiply the projection, view and model matrices |
| // once to prevent having to do it for every vertex, however we still need |
| // the view matrix to calculate lighting. |
| uniform mat4 u_modelViewMatrix; |
| |
| // we can calculate this once per model to speed up processing done on the js side. |
| uniform mat4 u_modelViewProjMatrix; |
| |
| // matrix to transform the vertex normals |
| uniform mat4 u_normalMatrix; |
| |
| // custom light structures need to be used since we don't have access to |
| // light states. |
| uniform Light u_light; |
| |
| // material |
| uniform vec4 u_globalAmbientColor; |
| uniform Material u_frontMaterial; |
| uniform Material u_backMaterial; |
| |
| // passed to fragment shader |
| varying vec4 v_diffuse, v_specular; |
| varying vec2 v_texCoord; |
| |
| /* |
| Given a reference to the ambient and diffuse lighting variables, |
| this function will calculate how much each component contributes to the scene. |
| |
| Light light - the light in view space |
| vec3 normal - |
| vec4 ambient - |
| vec4 diffuse - |
| */ |
| void directionalLight(in vec3 normal, inout vec4 ambient, inout vec4 diffuse, inout vec4 specular) |
| { |
| vec3 lightDir = normalize(vec3(u_light.position)); |
| ambient += u_light.ambient; |
| |
| float nDotL = max(dot(normal, lightDir), 0.0); |
| if (nDotL > 0.0) { |
| diffuse += u_light.diffuse * nDotL; |
| float nDotHV = max(dot(normal, u_light.halfVector), 0.0); |
| nDotHV += 0.3; |
| vec4 specularColor = u_frontMaterial.specular * u_light.specular; |
| specular += vec4(specularColor.rgb * pow(nDotHV, u_frontMaterial.shininess), specularColor.a); |
| } |
| } |
| |
| void main() |
| { |
| vec3 normal = normalize(u_normalMatrix * vec4(a_normal, 1)).xyz; |
| |
| vec4 ambient = vec4(0.0, 0.0, 0.0, 1.0); |
| vec4 diffuse = vec4(0.0, 0.0, 0.0, 1.0); |
| vec4 specular = vec4(0.0, 0.0, 0.0, 1.0); |
| |
| // place the current vertex into view space |
| // ecPos = eye coordinate position. |
| vec4 ecPos4 = u_modelViewMatrix * a_vertex; |
| |
| // the current vertex in eye coordinate space |
| vec3 ecPos = ecPos4.xyz/ecPos4.w; |
| directionalLight(normal, ambient, diffuse, specular); |
| |
| ambient = u_frontMaterial.ambient * ambient; |
| ambient += u_globalAmbientColor * u_frontMaterial.ambient; |
| diffuse = u_frontMaterial.diffuse * diffuse; |
| |
| v_diffuse = diffuse; |
| v_specular = specular + ambient; |
| gl_Position = u_modelViewProjMatrix * a_vertex; |
| v_texCoord = a_texCoord.st; |
| } |
| </script> |
| |
| <script id="fshader" type="x-shader/x-fragment"> |
| #ifdef GL_ES |
| precision mediump float; |
| #endif |
| |
| uniform sampler2D u_sampler2d; |
| |
| varying vec4 v_diffuse, v_specular; |
| varying vec2 v_texCoord; |
| |
| void main() |
| { |
| vec4 color = v_diffuse; |
| |
| gl_FragColor = color + v_specular; |
| } |
| </script> |
| |
| <script> |
| function setDirectionalLight(ctx, program, eyeVector, direction, ambient, diffuse, specular) |
| { |
| var lightString = "u_light."; |
| |
| ctx.uniform4f(ctx.getUniformLocation(program, lightString+"ambient"), |
| ambient[0], ambient[1], ambient[2], ambient[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, lightString+"diffuse"), |
| diffuse[0], diffuse[1], diffuse[2], diffuse[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, lightString+"specular"), |
| specular[0], specular[1], specular[2], specular[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, lightString+"position"), |
| direction[0], direction[1], direction[2], direction[3]); |
| |
| // compute the half vector |
| var halfVector = [ eyeVector[0] + direction[0], eyeVector[1] + direction[1], eyeVector[2] + direction[2] ]; |
| var length = Math.sqrt(halfVector[0] * halfVector[0] + |
| halfVector[1] * halfVector[1] + |
| halfVector[2] * halfVector[2]); |
| if (length == 0) |
| halfVector = [ 0, 0, 1 ]; |
| else { |
| halfVector[0] /= length; |
| halfVector[1] /= length; |
| halfVector[2] /= length; |
| } |
| |
| ctx.uniform3f(ctx.getUniformLocation(program, lightString+"halfVector"), |
| halfVector[0], halfVector[1], halfVector[2]); |
| } |
| |
| function setMaterial(ctx, program, emission, ambient, diffuse, specular, shininess) |
| { |
| var matString = "u_frontMaterial."; |
| ctx.uniform4f(ctx.getUniformLocation(program, matString+"emission"), |
| emission[0], emission[1], emission[2], emission[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, matString+"ambient"), |
| ambient[0], ambient[1], ambient[2], ambient[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, matString+"diffuse"), |
| diffuse[0], diffuse[1], diffuse[2], diffuse[3]); |
| ctx.uniform4f(ctx.getUniformLocation(program, matString+"specular"), |
| specular[0], specular[1], specular[2], specular[3]); |
| ctx.uniform1f(ctx.getUniformLocation(program, matString+"shininess"), shininess); |
| } |
| |
| function init() |
| { |
| var gl = initWebGL("example", "vshader", "fshader", |
| [ "a_normal", "a_texCoord", "a_vertex"], |
| [ 0, 0, 0, 1 ], 10000); |
| |
| gl.uniform1i(gl.getUniformLocation(gl.program, "u_sampler2d"), 0); |
| gl.uniform4f(gl.getUniformLocation(gl.program, "u_globalAmbientColor"), 0.2, 0.2, 0.2, 1); |
| |
| setDirectionalLight(gl, gl.program, |
| [ 0, 0, 1 ], // eyeVector |
| [0, 0, 1, 1], // position |
| [0.1, 0.1, 0.1, 1], // ambient |
| [1, 1, 1, 1], // diffuse |
| [1, 1, 1, 1]); // specular |
| |
| setMaterial(gl, gl.program, |
| [ 0, 0, 0, 0 ], // emission |
| [ 0.1, 0.1, 0.1, 1 ], // ambient |
| [ 0.8, 0.2, 0, 1 ], // diffuse |
| [ 0, 0, 1, 1 ], // specular |
| 32); // shininess |
| |
| obj = loadObj(gl, "resources/teapot.obj"); |
| |
| mvMatrix = new J3DIMatrix4(); |
| normalMatrix = new J3DIMatrix4(); |
| |
| return gl; |
| } |
| |
| width = -1; |
| height = -1; |
| loaded = false; |
| |
| function reshape(ctx) |
| { |
| var canvas = document.getElementById('example'); |
| if (canvas.width == width && canvas.height == height) |
| return; |
| |
| width = canvas.width; |
| height = canvas.height; |
| |
| ctx.viewport(0, 0, width, height); |
| |
| ctx.perspectiveMatrix = new J3DIMatrix4(); |
| ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000); |
| ctx.perspectiveMatrix.lookat(0,0,50, 0, 0, 0, 0, 1, 0); |
| } |
| |
| function drawPicture(ctx) |
| { |
| var startRenderTime = new Date().getTime(); |
| |
| reshape(ctx); |
| ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); |
| |
| if (!loaded && obj.loaded) { |
| loaded = true; |
| |
| ctx.enableVertexAttribArray(0); |
| ctx.enableVertexAttribArray(1); |
| ctx.enableVertexAttribArray(2); |
| |
| ctx.bindBuffer(ctx.ARRAY_BUFFER, obj.normalObject); |
| ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0); |
| |
| ctx.bindBuffer(ctx.ARRAY_BUFFER, obj.texCoordObject); |
| ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0); |
| |
| ctx.bindBuffer(ctx.ARRAY_BUFFER, obj.vertexObject); |
| ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0); |
| |
| ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject); |
| } |
| |
| if (!loaded) |
| return; |
| |
| // generate the model-view matrix |
| mvMatrix.makeIdentity(); |
| mvMatrix.rotate(10, 1,0,0); |
| mvMatrix.rotate(currentAngle, 0, 1, 0); |
| mvMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewMatrix"), false); |
| |
| // construct the normal matrix from the model-view matrix |
| normalMatrix.load(mvMatrix); |
| normalMatrix.invert(); |
| normalMatrix.transpose(); |
| normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false); |
| |
| // Construct the model-view * projection matrix and pass it in |
| var mvpMatrix = new J3DIMatrix4(); |
| mvpMatrix.load(ctx.perspectiveMatrix); |
| mvpMatrix.multiply(mvMatrix); |
| mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false); |
| |
| ctx.drawElements(ctx.TRIANGLES, obj.numIndices, ctx.UNSIGNED_SHORT, 0); |
| |
| ctx.flush(); |
| |
| framerate.snapshot(); |
| |
| currentAngle += incAngle; |
| if (currentAngle > 360) |
| currentAngle -= 360; |
| } |
| |
| function start() |
| { |
| var c = document.getElementById("example"); |
| var w = Math.floor(window.innerWidth * 0.9); |
| var h = Math.floor(window.innerHeight * 0.9); |
| |
| c.width = w; |
| c.height = h; |
| |
| var ctx = init(); |
| currentAngle = 0; |
| incAngle = 0.2; |
| framerate = new Framerate("framerate"); |
| var f = function() { drawPicture(ctx) }; |
| setInterval(f, 10); |
| } |
| </script> |
| <style type="text/css"> |
| canvas { |
| border: 2px solid black; |
| } |
| </style> |
| </head> |
| <body onload="start()"> |
| <canvas id="example"> |
| There is supposed to be an example drawing here, but it's not important. |
| </canvas> |
| <div id="framerate"></div> |
| </body> |
| </html> |
