/** * @author supereggbert / http://www.paulbrunt.co.uk/ * @author mrdoob / http://mrdoob.com/ */ THREE.WebGLRenderer = function () { var _canvas = document.createElement( 'canvas' ), _gl, _program, _viewMatrix = new THREE.Matrix4(), _normalMatrix; this.domElement = _canvas; this.autoClear = true; initGL(); initProgram(); // material constants used in shader var COLORFILL = 0, COLORSTROKE = 1, FACECOLORFILL = 2, FACECOLORSTROKE = 3, BITMAP = 4; this.setSize = function ( width, height ) { _canvas.width = width; _canvas.height = height; _gl.viewport( 0, 0, _canvas.width, _canvas.height ); }; this.clear = function () { _gl.clear( _gl.COLOR_BUFFER_BIT | _gl.DEPTH_BUFFER_BIT ); }; this.setupLights = function ( scene ) { var l, ll, lightColor, lightPosition, lightIntensity, light; _gl.uniform1i( _program.enableLighting, scene.lights.length ); for ( l = 0, ll = scene.lights.length; l < ll; l++ ) { light = scene.lights[ l ]; if ( light instanceof THREE.AmbientLight ) { lightColor = light.color; _gl.uniform3f( _program.ambientColor, lightColor.r, lightColor.g, lightColor.b ); } else if ( light instanceof THREE.DirectionalLight ) { lightColor = light.color; lightPosition = light.position; lightIntensity = light.intensity; _gl.uniform3f( _program.lightingDirection, lightPosition.x, lightPosition.y, lightPosition.z ); _gl.uniform3f( _program.directionalColor, lightColor.r * lightIntensity, lightColor.g * lightIntensity, lightColor.b * lightIntensity ); } else if( light instanceof THREE.PointLight ) { lightColor = light.color; lightPosition = light.position; lightIntensity = light.intensity; _gl.uniform3f( _program.pointPosition, lightPosition.x, lightPosition.y, lightPosition.z ); _gl.uniform3f( _program.pointColor, lightColor.r * lightIntensity, lightColor.g * lightIntensity, lightColor.b * lightIntensity ); } } }; this.createBuffers = function ( object, materialIndex ) { var materialFace = object.materialFaces[ materialIndex ]; var material = object.material[ materialIndex ]; var faceArray = []; var lineArray = []; var vertexArray = []; var colorArray = []; var normalArray = []; var uvArray = []; var vertexIndex = 0; var f, fl, fi, face, faceColor, vertexNormals, normal, uv, v1, v2, v3, v4; for ( f = 0, fl = materialFace.faces.length; f < fl; f++ ) { fi = materialFace.faces[f]; face = object.geometry.faces[ fi ]; faceColor = face.color; vertexNormals = face.vertexNormals; normal = face.normal; uv = object.geometry.uvs[ fi ]; if ( face instanceof THREE.Face3 ) { v1 = object.geometry.vertices[ face.a ].position; v2 = object.geometry.vertices[ face.b ].position; v3 = object.geometry.vertices[ face.c ].position; vertexArray.push( v1.x, v1.y, v1.z ); vertexArray.push( v2.x, v2.y, v2.z ); vertexArray.push( v3.x, v3.y, v3.z ); if ( vertexNormals.length == 3 ) { normalArray.push( vertexNormals[0].x, vertexNormals[0].y, vertexNormals[0].z ); normalArray.push( vertexNormals[1].x, vertexNormals[1].y, vertexNormals[1].z ); normalArray.push( vertexNormals[2].x, vertexNormals[2].y, vertexNormals[2].z ); } else { normalArray.push( normal.x, normal.y, normal.z ); normalArray.push( normal.x, normal.y, normal.z ); normalArray.push( normal.x, normal.y, normal.z ); } colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); if ( uv ) { uvArray.push( uv[0].u, uv[0].v ); uvArray.push( uv[1].u, uv[1].v ); uvArray.push( uv[2].u, uv[2].v ); } faceArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 ); // TODO: don't add lines that already exist (faces sharing edge) lineArray.push( vertexIndex, vertexIndex + 1 ); lineArray.push( vertexIndex, vertexIndex + 2 ); lineArray.push( vertexIndex + 1, vertexIndex + 2 ); vertexIndex += 3; } else if ( face instanceof THREE.Face4 ) { v1 = object.geometry.vertices[ face.a ].position; v2 = object.geometry.vertices[ face.b ].position; v3 = object.geometry.vertices[ face.c ].position; v4 = object.geometry.vertices[ face.d ].position; vertexArray.push( v1.x, v1.y, v1.z ); vertexArray.push( v2.x, v2.y, v2.z ); vertexArray.push( v3.x, v3.y, v3.z ); vertexArray.push( v4.x, v4.y, v4.z ); if ( vertexNormals.length == 4 ) { normalArray.push( vertexNormals[0].x, vertexNormals[0].y, vertexNormals[0].z ); normalArray.push( vertexNormals[1].x, vertexNormals[1].y, vertexNormals[1].z ); normalArray.push( vertexNormals[2].x, vertexNormals[2].y, vertexNormals[2].z ); normalArray.push( vertexNormals[3].x, vertexNormals[3].y, vertexNormals[3].z ); } else { normalArray.push( normal.x, normal.y, normal.z ); normalArray.push( normal.x, normal.y, normal.z ); normalArray.push( normal.x, normal.y, normal.z ); normalArray.push( normal.x, normal.y, normal.z ); } colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a ); if ( uv ) { uvArray.push( uv[0].u, uv[0].v ); uvArray.push( uv[1].u, uv[1].v ); uvArray.push( uv[2].u, uv[2].v ); uvArray.push( uv[3].u, uv[3].v ); } faceArray.push( vertexIndex, vertexIndex + 1, vertexIndex + 2 ); faceArray.push( vertexIndex, vertexIndex + 2, vertexIndex + 3 ); // TODO: don't add lines that already exist (faces sharing edge) lineArray.push( vertexIndex, vertexIndex + 1 ); lineArray.push( vertexIndex, vertexIndex + 2 ); lineArray.push( vertexIndex, vertexIndex + 3 ); lineArray.push( vertexIndex + 1, vertexIndex + 2 ); lineArray.push( vertexIndex + 2, vertexIndex + 3 ); vertexIndex += 4; } } if ( !vertexArray.length ) { return; } /* log( "vertices: " + vertexArray.length/3 ); log( "faces: " + faceArray.length/3 ); log( "normals: " + normalArray.length/3 ); log( "colors: " + colorArray.length/4 ); log( "uvs: " + uvArray.length/2 ); */ materialFace.__webGLVertexBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLVertexBuffer ); _gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( vertexArray ), _gl.STATIC_DRAW ); materialFace.__webGLNormalBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLNormalBuffer ); _gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( normalArray ), _gl.STATIC_DRAW ); materialFace.__webGLColorBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLColorBuffer ); _gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( colorArray ), _gl.STATIC_DRAW ); materialFace.__webGLUVBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLUVBuffer ); _gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( uvArray ), _gl.STATIC_DRAW ); materialFace.__webGLFaceBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLFaceBuffer ); _gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( faceArray ), _gl.STATIC_DRAW ); materialFace.__webGLLineBuffer = _gl.createBuffer(); _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLLineBuffer ); _gl.bufferData( _gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( lineArray ), _gl.STATIC_DRAW ); materialFace.__webGLFaceCount = faceArray.length; materialFace.__webGLLineCount = lineArray.length; } this.renderMesh = function ( object, camera ) { var m, ml, mf, material, materialFace, fi, lineWidth; // create separate VBOs per material for (var mf in object.materialFaces ) { materialFace = object.materialFaces[ mf ]; material = object.material[ mf ]; if( !material ) continue; // initialise on the first access if( !materialFace.__webGLVertexBuffer ) { this.createBuffers( object, mf ); } for ( m = 0, ml = object.material.length; m < ml; m++ ) { material = object.material[ m ]; // these materials can be either the only material for whole mesh // or if they are overlays in multimaterials, they apply only to // group of faces with single material (specified by decalIndex) if ( ( material instanceof THREE.MeshBitmapUVMappingMaterial || material instanceof THREE.MeshFaceColorFillMaterial || material instanceof THREE.MeshColorFillMaterial ) && ! ( m == mf || mf == material.decalIndex ) ) { continue; } if ( material instanceof THREE.MeshColorFillMaterial ) { color = material.color; _gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a ); _gl.uniform1i( _program.material, COLORFILL ); } else if ( material instanceof THREE.MeshColorStrokeMaterial ) { lineWidth = material.lineWidth; color = material.color; _gl.uniform4f( _program.uniformColor, color.r * color.a, color.g * color.a, color.b * color.a, color.a ); _gl.uniform1i( _program.material, COLORSTROKE ); } else if ( material instanceof THREE.MeshFaceColorFillMaterial ) { _gl.uniform1i( _program.material, FACECOLORFILL ); } else if ( material instanceof THREE.MeshFaceColorStrokeMaterial ) { lineWidth = material.lineWidth; _gl.uniform1i( _program.material, FACECOLORSTROKE ); } else if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) { if ( !material.__webGLTexture && material.loaded ) { material.__webGLTexture = _gl.createTexture(); _gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture ); _gl.texImage2D( _gl.TEXTURE_2D, 0, _gl.RGBA, _gl.RGBA, _gl.UNSIGNED_BYTE, material.bitmap ) ; _gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MAG_FILTER, _gl.LINEAR ); //_gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_NEAREST ); _gl.texParameteri( _gl.TEXTURE_2D, _gl.TEXTURE_MIN_FILTER, _gl.LINEAR_MIPMAP_LINEAR ); _gl.generateMipmap( _gl.TEXTURE_2D ); _gl.bindTexture( _gl.TEXTURE_2D, null ); } _gl.activeTexture( _gl.TEXTURE0 ); _gl.bindTexture( _gl.TEXTURE_2D, material.__webGLTexture ); _gl.uniform1i( _program.diffuse, 0 ); _gl.uniform1i( _program.material, BITMAP ); } // vertices _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLVertexBuffer ); _gl.vertexAttribPointer( _program.position, 3, _gl.FLOAT, false, 0, 0 ); // normals _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLNormalBuffer ); _gl.vertexAttribPointer( _program.normal, 3, _gl.FLOAT, false, 0, 0 ); // colors _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLColorBuffer ); _gl.vertexAttribPointer( _program.color, 4, _gl.FLOAT, false, 0, 0 ); // uvs if ( material instanceof THREE.MeshBitmapUVMappingMaterial ) { _gl.bindBuffer( _gl.ARRAY_BUFFER, materialFace.__webGLUVBuffer ); _gl.enableVertexAttribArray( _program.uv ); _gl.vertexAttribPointer( _program.uv, 2, _gl.FLOAT, false, 0, 0 ); } else { _gl.disableVertexAttribArray( _program.uv ); } // render triangles if ( material instanceof THREE.MeshBitmapUVMappingMaterial || material instanceof THREE.MeshFaceColorFillMaterial || material instanceof THREE.MeshColorFillMaterial ) { _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLFaceBuffer ); _gl.drawElements( _gl.TRIANGLES, materialFace.__webGLFaceCount, _gl.UNSIGNED_SHORT, 0 ); } // render lines else if ( material instanceof THREE.MeshColorStrokeMaterial || material instanceof THREE.MeshFaceColorStrokeMaterial ) { _gl.lineWidth( lineWidth ); _gl.bindBuffer( _gl.ELEMENT_ARRAY_BUFFER, materialFace.__webGLLineBuffer ); _gl.drawElements( _gl.LINES, materialFace.__webGLLineCount, _gl.UNSIGNED_SHORT, 0 ); } } } }; this.setupMatrices = function ( object, camera ) { object.autoUpdateMatrix && object.updateMatrix(); _viewMatrix.multiply( camera.matrix, object.matrix ); _program.viewMatrixArray = new Float32Array( _viewMatrix.flatten() ); _program.projectionMatrixArray = new Float32Array( camera.projectionMatrix.flatten() ); _normalMatrix = THREE.Matrix4.makeInvert3x3( object.matrix ).transpose(); _program.normalMatrixArray = new Float32Array( _normalMatrix.m ); _gl.uniformMatrix4fv( _program.viewMatrix, false, _program.viewMatrixArray ); _gl.uniformMatrix4fv( _program.projectionMatrix, false, _program.projectionMatrixArray ); _gl.uniformMatrix3fv( _program.normalMatrix, false, _program.normalMatrixArray ); _gl.uniformMatrix4fv( _program.objMatrix, false, new Float32Array( object.matrix.flatten() ) ); }; this.render = function ( scene, camera ) { camera.autoUpdateMatrix && camera.updateMatrix(); var o, ol, object; if ( this.autoClear ) { this.clear(); } this.setupLights( scene ); for ( o = 0, ol = scene.objects.length; o < ol; o++ ) { object = scene.objects[ o ]; this.setupMatrices( object, camera ); if ( object instanceof THREE.Mesh ) { this.renderMesh( object, camera ); } else if ( object instanceof THREE.Line ) { // TODO // It would be very inefficient to do lines one-by-one. // This will need a complete redesign from how CanvasRenderer does it. // Though it could be brute forced, if only used for lightweight // stuff (as CanvasRenderer can only handle small number of elements // anyways). // Heavy-duty wireframe lines are handled efficiently in mesh renderer. } else if ( object instanceof THREE.Particle ) { // TODO // The same as with lines, particles shouldn't be handled one-by-one. // Again, heavy duty particle system would require different approach, // like one VBO per particle system and then update attribute arrays, // though the best would be to move also behavior computation // into the shader (ala http://spidergl.org/example.php?id=11) } } }; function initGL() { try { _gl = _canvas.getContext( 'experimental-webgl', { antialias: true} ); } catch(e) { } if (!_gl) { alert("WebGL not supported"); throw "cannot create webgl context"; } _gl.clearColor( 0, 0, 0, 1 ); _gl.clearDepth( 1 ); _gl.enable( _gl.DEPTH_TEST ); _gl.depthFunc( _gl.LEQUAL ); _gl.enable( _gl.BLEND ); //_gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA ); // _gl.blendFunc( _gl.SRC_ALPHA, _gl.ONE ); // cool! _gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA ); _gl.clearColor( 0, 0, 0, 0 ); } function initProgram() { _program = _gl.createProgram(); _gl.attachShader( _program, getShader( "fragment", [ "#ifdef GL_ES", "precision highp float;", "#endif", "uniform sampler2D diffuse;", "uniform vec4 uniformColor;", "varying vec2 vertexUv;", "varying vec4 vertexColor;", "varying vec3 lightWeighting;", "varying vec3 vNormal;", "uniform int material;", // 0 - ColorFill, 1 - ColorStroke, 2 - FaceColorFill, 3 - FaceColorStroke, 4 - Bitmap "void main(){", "if(material==4) {", // Bitmap: texture "vec4 texelColor = texture2D(diffuse, vertexUv);", "gl_FragColor = vec4(texelColor.rgb * lightWeighting, texelColor.a);", "} else if(material==3) {", // FaceColorStroke: wireframe using vertex color "gl_FragColor = vec4(vertexColor.rgb * lightWeighting, vertexColor.a);", "} else if(material==2) {", // FaceColorFill: triangle using vertex color "gl_FragColor = vec4(vertexColor.rgb * lightWeighting, vertexColor.a);", "} else if(material==1) {", // ColorStroke: wireframe using uniform color "gl_FragColor = vec4(uniformColor.rgb * lightWeighting, uniformColor.a);", "} else {", // ColorFill: triangle using uniform color "gl_FragColor = vec4(uniformColor.rgb * lightWeighting, uniformColor.a);", //"gl_FragColor = vec4(vNormal, 1.0);", "}", "}" ].join("\n") ) ); _gl.attachShader( _program, getShader( "vertex", [ "attribute vec3 position;", "attribute vec3 normal;", "attribute vec4 color;", "attribute vec2 uv;", "uniform bool enableLighting;", "uniform vec3 ambientColor;", "uniform vec3 directionalColor;", "uniform vec3 lightingDirection;", "uniform vec3 pointColor;", "uniform vec3 pointPosition;", "uniform mat4 viewMatrix;", "uniform mat4 projectionMatrix;", "uniform mat4 objMatrix;", "uniform mat3 normalMatrix;", "varying vec4 vertexColor;", "varying vec2 vertexUv;", "varying vec3 lightWeighting;", "varying vec3 vNormal;", "void main(void) {", "vec4 mvPosition = viewMatrix * vec4( position, 1.0 );", "vec4 mPosition = objMatrix * vec4( position, 1.0 );", "vec3 transformedNormal = normalize(normalMatrix * normal);", "if(!enableLighting) {", "lightWeighting = vec3(1.0, 1.0, 1.0);", "} else {", "vec3 pointLight = normalize(pointPosition.xyz - mPosition.xyz);", "float directionalLightWeighting = max(dot(transformedNormal, normalize(lightingDirection)), 0.0);", "float pointLightWeighting = max(dot(transformedNormal, pointLight), 0.0);", "lightWeighting = ambientColor + directionalColor * directionalLightWeighting + pointColor * pointLightWeighting;", "}", "vNormal = transformedNormal;", "vertexColor = color;", "vertexUv = uv;", "gl_Position = projectionMatrix * mvPosition;", "}"].join("\n") ) ); _gl.linkProgram( _program ); if ( !_gl.getProgramParameter( _program, _gl.LINK_STATUS ) ) { alert( "Could not initialise shaders" ); } _gl.useProgram( _program ); _program.viewMatrix = _gl.getUniformLocation( _program, "viewMatrix" ); _program.projectionMatrix = _gl.getUniformLocation( _program, "projectionMatrix" ); _program.normalMatrix = _gl.getUniformLocation( _program, "normalMatrix" ); _program.objMatrix = _gl.getUniformLocation( _program, "objMatrix" ); _program.enableLighting = _gl.getUniformLocation(_program, 'enableLighting'); _program.ambientColor = _gl.getUniformLocation(_program, 'ambientColor'); _program.directionalColor = _gl.getUniformLocation(_program, 'directionalColor'); _program.lightingDirection = _gl.getUniformLocation(_program, 'lightingDirection'); _program.pointColor = _gl.getUniformLocation(_program, 'pointColor'); _program.pointPosition = _gl.getUniformLocation(_program, 'pointPosition'); _program.material = _gl.getUniformLocation(_program, 'material'); _program.uniformColor = _gl.getUniformLocation(_program, 'uniformColor'); _program.color = _gl.getAttribLocation( _program, "color" ); _gl.enableVertexAttribArray( _program.color ); _program.position = _gl.getAttribLocation( _program, "position" ); _gl.enableVertexAttribArray( _program.position ); _program.normal = _gl.getAttribLocation( _program, "normal" ); _gl.enableVertexAttribArray( _program.normal ); _program.uv = _gl.getAttribLocation( _program, "uv" ); _gl.enableVertexAttribArray( _program.uv ); _program.diffuse = _gl.getUniformLocation( _program, "diffuse"); _gl.uniform1i( _program.diffuse, 0 ); _program.viewMatrixArray = new Float32Array(16); _program.projectionMatrixArray = new Float32Array(16); } function getShader( type, string ) { var shader; if ( type == "fragment" ) { shader = _gl.createShader( _gl.FRAGMENT_SHADER ); } else if ( type == "vertex" ) { shader = _gl.createShader( _gl.VERTEX_SHADER ); } _gl.shaderSource( shader, string ); _gl.compileShader( shader ); if ( !_gl.getShaderParameter( shader, _gl.COMPILE_STATUS ) ) { alert( _gl.getShaderInfoLog( shader ) ); return null; } return shader; } };