jsc3d-js-rails 1.6.5

data/vendor/assets/javascripts/jsc3d.webgl.js

@@ -0,0 +1,1041 @@
+/**
+ * @preserve Copyright (c) 2011~2013 Humu <humu2009@gmail.com>
+ * This file is part of jsc3d project, which is freely distributable under the 
+ * terms of the MIT license.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+
+/**
+	@namespace JSC3D
+ */
+var JSC3D = JSC3D || {};
+
+
+/**
+ * Lacked Features / Issue List:
+ * 1. Wireframe rendering is not implemented yet.
+ * 2. Does not support data updating.
+ * 3. Picking does not work correctly on old Firefox (tested on FF6, 8). This may be related with some defect in FF's frame-buffer binding.
+ * 4. Each 1st frame is not presented properly when switching from 'standard' to other definitions on old Firefox. There will be a blank frame then.
+ */
+
+/**
+ * @class WebGLRenderBackend
+ *
+ * This class implements an optional WebGL render back-end for {JSC3D.Viewer}. If enabled, it takes 
+ * place of {JSC3D.Viewer}'s default software rendering module and provides high performance rendering.
+ */
+JSC3D.WebGLRenderBackend = function(canvas, releaseLocalBuffers) {
+	this.canvas = canvas;
+	// IE11 only has a partial implementation of WebGL API, thus some special treatments are required 
+	// to avoid usage of unsupported methods and properties.
+	this.isIE11 = (JSC3D.PlatformInfo.browser == 'ie') && (parseInt(JSC3D.PlatformInfo.version) >= 11);
+	this.gl = canvas.getContext('experimental-webgl', {/*antialias: false,*/ preserveDrawingBuffer: true/*this is necessary since we need to read back pixels for picking*/}) || canvas.getContext('webgl');
+	if(!this.gl)
+		throw 'JSC3D.WebGLRenderBackend constructor failed: Cannot get WebGL context!';
+	this.definition = 'standard';
+	this.bkgColors = [0, 0];
+	this.bkgTexture = null;
+	this.backFB = null;
+	this.pickingFB = null;
+	this.pickingResult = new Uint8Array(4);
+	this.releaseLocalBuffers = releaseLocalBuffers || false;
+
+	this.screen_vs =	'#ifdef GL_ES \n' + 
+						'	precision mediump float; \n' + 
+						'#endif	\n' + 
+						'\n' + 
+						'attribute vec2 a_position; \n' + 
+						'varying vec2 v_texCoord; \n' + 
+						'\n' + 
+						'void main(void) { \n' + 
+						'	v_texCoord = vec2(0.5, 0.5) * a_position + vec2(0.5, 0.5); \n' + 
+						'	gl_Position = vec4(a_position, 1.0, 1.0); \n' + 
+						'}';
+	this.screen_fs =	'#ifdef GL_ES \n' + 
+						'	precision mediump float; \n' + 
+						'#endif	\n' + 
+						'\n' + 
+						'uniform sampler2D s_screenTexture; \n' + 
+						'varying vec2 v_texCoord; \n' + 
+						'\n' + 
+						'void main(void) { \n' + 
+						'	gl_FragColor = texture2D(s_screenTexture, v_texCoord); \n' + 
+						'}';
+	this.gradient_background_vs =	'#ifdef GL_ES \n' + 
+									'	precision mediump float; \n' + 
+									'#endif	\n' + 
+									'\n' + 
+									'uniform vec3 u_color1; \n' + 
+									'uniform vec3 u_color2; \n' + 
+									'attribute vec2 a_position; \n' + 
+									'varying vec4 v_color; \n' + 
+									'\n' + 
+									'void main(void) { \n' + 
+									'	v_color = vec4(a_position.y > 0.0 ? u_color1 : u_color2, 1.0); \n' + 
+									'	gl_Position = vec4(a_position, 1.0, 1.0); \n' + 
+									'}';
+	this.gradient_background_fs =	'#ifdef GL_ES \n' + 
+									'	precision mediump float; \n' + 
+									'#endif	\n' + 
+									'\n' + 
+									'varying vec4 v_color; \n' + 
+									'\n' + 
+									'void main(void) { \n' + 
+									'	gl_FragColor = v_color;' + 
+									'}';
+	this.frame_vs =	'#ifdef GL_ES \n' + 
+					'	precision mediump float; \n' + 
+					'#endif	\n' + 
+					'\n' + 
+					'uniform bool u_isPoint; \n' + 
+					'uniform mat4 u_transformMatrix; \n' + 
+					'attribute vec3 a_position; \n' + 
+					'\n' + 
+					'void main(void) { \n' + 
+					'	if(u_isPoint) { \n' + 
+					'		gl_PointSize = 2.0; \n' + 
+					'	} \n' + 
+					'	gl_Position = u_transformMatrix * vec4(a_position, 1.0); \n' + 
+					'}';
+	this.frame_fs =	'#ifdef GL_ES \n' + 
+					'	precision mediump float; \n' + 
+					'#endif	\n' + 
+					'\n' + 
+					'uniform vec3 u_materialColor; \n' + 
+					'\n' + 
+					'void main(void) { \n' + 
+					'	gl_FragColor = vec4(u_materialColor, 1.0); \n' + 
+					'}';
+	this.solid_vs = '#ifdef GL_ES \n' + 
+					'	precision mediump float; \n' + 
+					'#endif	\n' + 
+					'\n' + 
+					'uniform bool u_isLit; \n' + 
+					'uniform bool u_isCast; \n' + 
+					'uniform bool u_hasTexture; \n' + 
+					'uniform mat3 u_rotationMatrix; \n' + 
+					'uniform mat4 u_transformMatrix; \n' + 
+					'attribute vec3 a_position; \n' + 
+					'attribute vec3 a_normal; \n' + 
+					'attribute vec2 a_texCoord; \n' + 
+					'varying vec3 v_normal; \n' + 
+					'varying vec2 v_texCoord; \n' + 
+					'\n' + 
+					'void main(void) { \n' + 
+					'	if(u_isLit) { \n' + 
+					'		v_normal = u_rotationMatrix * a_normal; \n' + 
+					'	} \n' + 
+					'	if(u_hasTexture) { \n' + 
+					'		v_texCoord = a_texCoord; \n' + 
+					'	} \n' + 
+					'	gl_Position = u_transformMatrix * vec4(a_position, 1.0); \n' + 
+					'}';
+	this.solid_fs = '#ifdef GL_ES \n' + 
+					'	precision mediump float; \n' + 
+					'#endif	\n' + 
+					'\n' + 
+					'uniform bool  u_isLit; \n' + 
+					'uniform bool  u_isCast; \n' + 
+					'uniform bool  u_hasTexture; \n' + 
+					'uniform float u_opacity; \n' + 
+					'uniform sampler2D s_palette; \n' + 
+					'uniform sampler2D s_texture; \n' + 
+					'uniform sampler2D s_sphereTexture; \n' + 
+					'varying vec3 v_normal; \n' + 
+					'varying vec2 v_texCoord; \n' + 
+					'\n' + 
+					'void main(void) { \n' + 
+					'	vec4 materialColor = u_isLit ? vec4(texture2D(s_palette, vec2(abs(v_normal.z), 0.0)).rgb, u_opacity) : vec4(1.0, 1.0, 1.0, u_opacity); \n' + 
+					'	if(u_isCast) { \n' + 
+					'		gl_FragColor = materialColor * texture2D(s_sphereTexture, vec2(0.5, -0.5) * v_normal.xy + vec2(0.5, 0.5)); \n' + 
+					'	} \n' + 
+					'	else { \n' + 
+					'		gl_FragColor = u_hasTexture ? (materialColor * texture2D(s_texture, v_texCoord)) : materialColor; \n' + 
+					'	} \n' + 
+					'}';
+	this.picking_vs =	'#ifdef GL_ES \n' + 
+						'	precision mediump float; \n' + 
+						'#endif	\n' + 
+						'\n' + 
+						'uniform mat4 u_transformMatrix; \n' + 
+						'attribute vec3 a_position; \n' + 
+						'\n' + 
+						'void main(void) { \n' + 
+						'	gl_Position = u_transformMatrix * vec4(a_position, 1.0); \n' + 
+						'}'; 
+	this.picking_fs =	'#ifdef GL_ES \n' + 
+						'	precision mediump float; \n' + 
+						'#endif	\n' + 
+						'\n' + 
+						'uniform vec3 u_pickingId; \n' + 
+						'\n' + 
+						'void main(void) { \n' + 
+						'	gl_FragColor = vec4(u_pickingId, 1.0); \n' + 
+						'}';
+
+	function createProgram(gl, vSrc, fSrc) {
+		var vShader = gl.createShader(gl.VERTEX_SHADER);
+		gl.shaderSource(vShader, vSrc);
+		gl.compileShader(vShader);
+		if(!gl.getShaderParameter(vShader, gl.COMPILE_STATUS)) {
+			if(JSC3D.console)
+				JSC3D.console.logWarning('Error occured in shader compilation: ' + gl.getShaderInfoLog(vShader) + ' The corresponding program will be ignored.');
+			return null;
+		}
+
+		var fShader = gl.createShader(gl.FRAGMENT_SHADER);
+		gl.shaderSource(fShader, fSrc);
+		gl.compileShader(fShader);
+		if(!gl.getShaderParameter(fShader, gl.COMPILE_STATUS)) {
+			if(JSC3D.console)
+				JSC3D.console.logWarning('Error occured in shader compilation: ' + gl.getShaderInfoLog(fShader) + ' The corresponding program will be ignored.');
+			return null;
+		}
+
+		var program = gl.createProgram();
+		gl.attachShader(program, vShader);
+		gl.attachShader(program, fShader);
+		gl.linkProgram(program);
+		if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			if(JSC3D.console)
+				JSC3D.console.logWarning('Error occured when generating program: ' + gl.getProgramInfoLog(program) + ' This program will be ignored.');
+			return null;
+		}
+
+		program.attributes = {};
+		var numOfAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+		for(var i=0; i<numOfAttribs; i++) {
+			var attrib = gl.getActiveAttrib(program, i);
+			program.attributes[attrib.name] = gl.getAttribLocation(program, attrib.name);
+		}
+
+		program.uniforms = {};
+		var numOfUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+		for(var i=0; i<numOfUniforms; i++) {
+			var uniform = gl.getActiveUniform(program, i);
+			program.uniforms[uniform.name] = gl.getUniformLocation(program, uniform.name);
+		}
+
+		return program;
+	}
+
+	this.programs = {
+		screen: createProgram(this.gl, this.screen_vs, this.screen_fs), 
+		gradient_background: createProgram(this.gl, this.gradient_background_vs, this.gradient_background_fs), 
+		frame: createProgram(this.gl, this.frame_vs, this.frame_fs), 
+		solid: createProgram(this.gl, this.solid_vs, this.solid_fs), 
+		picking: createProgram(this.gl, this.picking_vs, this.picking_fs)
+	};
+
+	this.canvasBoard = this.gl.createBuffer();
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.canvasBoard);
+	this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, 1, 1, 1, 1, -1, 1, -1, -1]), this.gl.STATIC_DRAW);
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+};
+
+JSC3D.WebGLRenderBackend.prototype.setBackgroundColors = function(color1, color2) {
+	this.bkgColors = [new Float32Array([(color1 & 0xff0000) / 16777216, (color1 & 0xff00) / 65536, (color1 & 0xff) / 256])];
+	if(color1 != color2)
+		this.bkgColors.push(new Float32Array([(color2 & 0xff0000) / 16777216, (color2 & 0xff00) / 65536, (color2 & 0xff) / 256]));
+};
+
+JSC3D.WebGLRenderBackend.prototype.setBackgroundImage = function(img) {
+	var gl = this.gl;
+
+	this.bkgTexture = gl.createTexture();
+	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+	gl.bindTexture(gl.TEXTURE_2D, this.bkgTexture);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	gl.bindTexture(gl.TEXTURE_2D, null);
+	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+};
+
+JSC3D.WebGLRenderBackend.prototype.beginFrame = function(definition) {
+	var gl = this.gl;
+
+	function prepareFB(gl, fbo, w, h) {
+		gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+
+		// create a render buffer object and set it as the depth attachment of the fbo
+		var depthAttachment = gl.createRenderbuffer();
+		gl.bindRenderbuffer(gl.RENDERBUFFER, depthAttachment);
+		gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h);
+		gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthAttachment);
+		gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+
+		// create a texture object and set it as the color attachment of the fbo
+		var colorAttachment = gl.createTexture();
+		//gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, colorAttachment);
+		gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorAttachment, 0);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+		gl.bindTexture(gl.TEXTURE_2D, null);
+
+		fbo.width = w;
+		fbo.height = h;
+		fbo.texture = colorAttachment;
+		fbo.depthRB = depthAttachment;
+	}
+
+	function destroyFB(gl, fbo) {
+		gl.deleteRenderbuffer(fbo.depthRB);
+		gl.deleteTexture(fbo.texture);
+		gl.deleteFramebuffer(fbo);
+	}
+
+	// create the picking frame-buffer
+	if(!this.pickingFB) {
+		this.pickingFB = gl.createFramebuffer();
+		prepareFB(gl, this.pickingFB, this.canvas.width, this.canvas.height);
+		gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+	}
+
+	var frameWidth  = this.canvas.width;
+	var frameHeight = this.canvas.height;
+	switch(definition) {
+	case 'low':
+		frameWidth  = frameWidth >> 1;
+		frameHeight = frameHeight >> 1;
+		break;
+	case 'high':
+		frameWidth  *= 2;
+		frameHeight *= 2;
+		break;
+	case 'standard':
+	default:
+		break;
+	}
+
+	/*
+	 * For definitions other than 'standard', drawings will be generated in the back frame-buffer
+	 * and then resampled to be applied to canvas.
+	 */
+	if(frameWidth != this.canvas.width) {
+		if(!this.backFB) {
+			// create the back frame-buffer and bind it as render target
+			this.backFB = gl.createFramebuffer();
+			prepareFB(gl, this.backFB, frameWidth, frameHeight);
+		}
+		else if(this.definition != definition) {
+			// reallocate storage for the back frame-buffer as definition has changed, then bind it
+			// as render target
+			prepareFB(gl, this.backFB, frameWidth, frameHeight);
+		}
+		else {
+			// bind the back frame-buffer as render target
+			gl.bindFramebuffer(gl.FRAMEBUFFER, this.backFB);
+		}
+	}
+	else if(this.backFB) {
+		// delete and destroy the back frame-buffer as it is no longer needed under 'standard' definition
+		destroyFB(gl, this.backFB);
+		this.backFB = null;
+	}
+
+	this.definition = definition;
+
+	gl.viewport(0, 0, frameWidth, frameHeight);
+
+	/*
+	 * Clear canvas with the given background.
+	 */
+	if(this.bkgTexture) {
+		/*
+		 * Apply background texture.
+		 */
+		gl.frontFace(gl.CCW);
+		gl.disable(gl.DEPTH_TEST);
+		gl.clear(gl.DEPTH_BUFFER_BIT);
+		gl.useProgram(this.programs.screen);
+		gl.activeTexture(gl.TEXTURE0);
+		gl.bindTexture(gl.TEXTURE_2D, this.bkgTexture);
+		gl.uniform1i(this.programs.screen.uniforms['s_screenTexture'], 0);
+		gl.enableVertexAttribArray(0);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.canvasBoard);
+		gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+		gl.drawArrays(gl.TRIANGLES, 0, 6);
+		gl.bindBuffer(gl.ARRAY_BUFFER, null);
+		gl.bindTexture(gl.TEXTURE_2D, null);
+	}
+	else if(this.bkgColors.length > 1) {
+		/*
+		 * Draw gradient background.
+		 */
+		gl.frontFace(gl.CCW);
+		gl.disable(gl.DEPTH_TEST);
+		gl.clear(gl.DEPTH_BUFFER_BIT);
+		gl.useProgram(this.programs.gradient_background);
+		gl.uniform3fv(this.programs.gradient_background.uniforms['u_color1'], this.bkgColors[0]);
+		gl.uniform3fv(this.programs.gradient_background.uniforms['u_color2'], this.bkgColors[1]);
+		gl.enableVertexAttribArray(0);
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.canvasBoard);
+		gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+		gl.drawArrays(gl.TRIANGLES, 0, 6);
+		gl.bindBuffer(gl.ARRAY_BUFFER, null);
+	}
+	else {
+		/*
+		 * Clear canvas with a single background color.
+		 */
+		var color = this.bkgColors[0];
+		gl.clearColor(color[0], color[1], color[2], 1);
+		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+	}
+};
+
+JSC3D.WebGLRenderBackend.prototype.endFrame = function() {
+	var gl = this.gl;
+
+	// unbind any additional frame-buffer and redirect latter output to canvas
+	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+	switch(this.definition) {
+	case 'low':
+	case 'high':
+		if(this.backFB) {
+			// resample the drawings in the back frame-buffer and apply it to canvas
+			gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+			gl.frontFace(gl.CCW);
+			gl.disable(gl.DEPTH_TEST);
+			gl.useProgram(this.programs.screen);
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, this.backFB.texture);
+			gl.uniform1i(this.programs.screen.uniforms['s_screenTexture'], 0);
+			gl.enableVertexAttribArray(0);
+			gl.bindBuffer(gl.ARRAY_BUFFER, this.canvasBoard);
+			gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+			gl.drawArrays(gl.TRIANGLES, 0, 6);
+			gl.bindBuffer(gl.ARRAY_BUFFER, null);
+			gl.bindTexture(gl.TEXTURE_2D, null);
+		}
+		break;
+	case 'standard':
+	default:
+		break;
+	}
+
+	gl.flush();
+};
+
+JSC3D.WebGLRenderBackend.prototype.render = function(renderList, transformMatrix, normalMatrix, renderMode, defaultMaterial, sphereMap) {
+	var gl = this.gl;
+
+	var transformMat4Flattened = new Float32Array([
+		transformMatrix.m00, transformMatrix.m10, transformMatrix.m20, 0, 
+		transformMatrix.m01, transformMatrix.m11, transformMatrix.m21, 0, 
+		transformMatrix.m02, transformMatrix.m12, transformMatrix.m22, 0, 
+		transformMatrix.m03, transformMatrix.m13, transformMatrix.m23, 1
+	]);
+
+	var normalMat3Flattened = new Float32Array([
+		normalMatrix.m00, normalMatrix.m10, normalMatrix.m20, 
+		normalMatrix.m01, normalMatrix.m11, normalMatrix.m21, 
+		normalMatrix.m02, normalMatrix.m12, normalMatrix.m22
+	]);
+
+	// render the color pass
+	this.renderColorPass(renderList, transformMat4Flattened, normalMat3Flattened, renderMode, defaultMaterial, sphereMap);
+
+	// render the picking pass
+	if(this.pickingFB) {
+		gl.bindFramebuffer(gl.FRAMEBUFFER, this.pickingFB);
+		this.renderPickingPass(renderList, transformMat4Flattened, defaultMaterial);
+		gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+	}
+};
+
+JSC3D.WebGLRenderBackend.prototype.pick = function(x, y) {
+	if(!this.pickingFB)
+		return 0;
+
+	var gl = this.gl;
+
+	gl.bindFramebuffer(gl.FRAMEBUFFER, this.pickingFB);
+	gl.readPixels(x, this.pickingFB.height - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, this.pickingResult);
+	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+	return this.pickingResult[0] << 16 | this.pickingResult[1] << 8 | this.pickingResult[2];
+};
+
+JSC3D.WebGLRenderBackend.prototype.renderColorPass = function(renderList, transformMat4, normalMat3, renderMode, defaultMaterial, sphereMap) {
+	if(sphereMap && sphereMap.hasData() && !sphereMap.compiled)
+		this.compileTexture(sphereMap);
+
+	var gl = this.gl;
+
+	gl.disable(gl.BLEND);
+	gl.enable(gl.DEPTH_TEST);
+	gl.depthMask(true);
+	gl.frontFace(gl.CCW);
+
+	var curProgram = null;
+	var isBlendEnabled = false;
+
+	for(var i=0; i<renderList.length; i++) {
+		var mesh = renderList[i];
+		if(mesh.isTrivial() || !mesh.visible)
+			continue;
+
+		var material = mesh.material || defaultMaterial;
+		var texture = mesh.hasTexture() ? mesh.texture : null;
+		var isTransparent = (material.transparency > 0) || (texture && texture.hasTransparency);
+		var opacity = 1 - material.transparency;
+
+		if(!material.compiled)
+			this.compileMaterial(material);
+		if(texture && !texture.compiled)
+			this.compileTexture(texture);
+
+		if(mesh.isDoubleSided)
+			gl.disable(gl.CULL_FACE);
+		else
+			gl.enable(gl.CULL_FACE);
+
+		// switch blend mode
+		if(isTransparent != isBlendEnabled) {
+			if(isTransparent) {
+				gl.depthMask(false);
+				gl.enable(gl.BLEND);
+				gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
+			}
+			else {
+				gl.depthMask(true);
+				gl.disable(gl.BLEND);
+			}
+			isBlendEnabled = isTransparent;
+		}
+
+		var isSphereMapped = mesh.isEnvironmentCast && (sphereMap != null);
+
+		// resolve current render mode and chose a right program
+		var rmode = mesh.renderMode || renderMode;
+		var program;
+		switch(rmode) {
+		case 'point':
+		case 'wireframe':
+			program = this.programs.frame;
+			break;
+		case 'flat':
+		case 'smooth':
+			program = this.programs.solid;
+			break;
+		case 'texture':
+		case 'textureflat':
+			if(!texture)
+				rmode = 'flat';
+			program = this.programs.solid;
+			break;
+		case 'texturesmooth':
+			if(!texture && !isSphereMapped)
+				rmode = 'smooth';
+			program = this.programs.solid;
+			break;
+		default:
+			rmode = 'flat';
+			program = this.programs.solid;
+			break;
+		}
+
+		if(!mesh.compiled || mesh.compiled.remderMode != rmode)
+			this.compileMesh(mesh, rmode);
+
+		if(curProgram != program) {
+			gl.useProgram(program);
+			curProgram = program;
+		}
+
+		// render this mesh with the correct render mode
+		switch(rmode) {
+		case 'point':
+			gl.uniform1i(program.uniforms['u_isPoint'], rmode == 'point');
+			gl.uniform3fv(program.uniforms['u_materialColor'], material.compiled.diffColor);
+			gl.uniformMatrix4fv(program.uniforms['u_transformMatrix'], false, transformMat4);
+			gl.enableVertexAttribArray(program.attributes['a_position']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+			gl.vertexAttribPointer(program.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+			gl.drawArrays(gl.POINTS, 0, mesh.compiled.coordCount);
+			break;
+		case 'wireframe':
+			//TODO: implement this
+			break;
+		case 'flat':
+		case 'smooth':
+			gl.uniform1i(program.uniforms['u_isLit'], true);
+			gl.uniform1i(program.uniforms['u_isCast'], false);
+			gl.uniform1i(program.uniforms['u_hasTexture'], false);
+			gl.uniform1f(program.uniforms['u_opacity'], opacity);
+			gl.uniformMatrix3fv(program.uniforms['u_rotationMatrix'], false, normalMat3);
+			gl.uniformMatrix4fv(program.uniforms['u_transformMatrix'], false, transformMat4);
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, material.compiled.palette);
+			gl.uniform1i(program.uniforms['s_palette'], 0);
+			gl.enableVertexAttribArray(program.attributes['a_position']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+			gl.vertexAttribPointer(program.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+			gl.enableVertexAttribArray(program.attributes['a_normal']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+			gl.vertexAttribPointer(program.attributes['a_normal'], 3, gl.FLOAT, false, 0, 0);
+			gl.disableVertexAttribArray(program.attributes['a_texCoord']);
+			gl.drawArrays(gl.TRIANGLES, 0, mesh.compiled.coordCount);
+			break;
+		case 'texture':
+			gl.uniform1i(program.uniforms['u_isLit'], false);
+			gl.uniform1i(program.uniforms['u_isCast'], false);
+			gl.uniform1i(program.uniforms['u_hasTexture'], true);
+			gl.uniform1f(program.uniforms['u_opacity'], opacity);
+			gl.uniformMatrix3fv(program.uniforms['u_rotationMatrix'], false, normalMat3);
+			gl.uniformMatrix4fv(program.uniforms['u_transformMatrix'], false, transformMat4);
+			gl.activeTexture(gl.TEXTURE1);
+			gl.bindTexture(gl.TEXTURE_2D, texture.compiled.tex);
+			gl.uniform1i(program.uniforms['s_texture'], 1);
+			gl.enableVertexAttribArray(program.attributes['a_position']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+			gl.vertexAttribPointer(program.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+			gl.disableVertexAttribArray(program.attributes['a_normal']);
+			gl.enableVertexAttribArray(program.attributes['a_texCoord']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.texcoords);
+			gl.vertexAttribPointer(program.attributes['a_texCoord'], 2, gl.FLOAT, false, 0, 0);
+			gl.drawArrays(gl.TRIANGLES, 0, mesh.compiled.coordCount);
+			break;
+		case 'textureflat':
+			gl.uniform1i(program.uniforms['u_isLit'], true);
+			gl.uniform1i(program.uniforms['u_isCast'], false);
+			gl.uniform1i(program.uniforms['u_hasTexture'], true);
+			gl.uniform1f(program.uniforms['u_opacity'], opacity);
+			gl.uniformMatrix3fv(program.uniforms['u_rotationMatrix'], false, normalMat3);
+			gl.uniformMatrix4fv(program.uniforms['u_transformMatrix'], false, transformMat4);
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, material.compiled.palette);
+			gl.uniform1i(program.uniforms['s_palette'], 0);
+			gl.activeTexture(gl.TEXTURE1);
+			gl.bindTexture(gl.TEXTURE_2D, texture.compiled.tex);
+			gl.uniform1i(program.uniforms['s_texture'], 1);
+			gl.enableVertexAttribArray(program.attributes['a_position']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+			gl.vertexAttribPointer(program.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+			gl.enableVertexAttribArray(program.attributes['a_normal']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+			gl.vertexAttribPointer(program.attributes['a_normal'], 3, gl.FLOAT, false, 0, 0);
+			gl.enableVertexAttribArray(program.attributes['a_texCoord']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.texcoords);
+			gl.vertexAttribPointer(program.attributes['a_texCoord'], 2, gl.FLOAT, false, 0, 0);
+			gl.drawArrays(gl.TRIANGLES, 0, mesh.compiled.coordCount);
+			break;
+		case 'texturesmooth':
+			gl.uniform1i(program.uniforms['u_isLit'], true);
+			gl.uniform1i(program.uniforms['u_isCast'], isSphereMapped);
+			gl.uniform1i(program.uniforms['u_hasTexture'], !isSphereMapped);
+			gl.uniform1f(program.uniforms['u_opacity'], opacity);
+			gl.uniformMatrix3fv(program.uniforms['u_rotationMatrix'], false, normalMat3);
+			gl.uniformMatrix4fv(program.uniforms['u_transformMatrix'], false, transformMat4);
+			gl.activeTexture(gl.TEXTURE0);
+			gl.bindTexture(gl.TEXTURE_2D, material.compiled.palette);
+			gl.uniform1i(program.uniforms['s_palette'], 0);
+			if(!isSphereMapped) {
+				gl.activeTexture(gl.TEXTURE1);
+				gl.bindTexture(gl.TEXTURE_2D, texture.compiled.tex);
+				gl.uniform1i(program.uniforms['s_texture'], 1);
+			}
+			else {
+				gl.activeTexture(gl.TEXTURE2);
+				gl.bindTexture(gl.TEXTURE_2D, sphereMap.compiled.tex);
+				gl.uniform1i(program.uniforms['s_sphereTexture'], 2);
+			}
+			gl.enableVertexAttribArray(program.attributes['a_position']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+			gl.vertexAttribPointer(program.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+			gl.enableVertexAttribArray(program.attributes['a_normal']);
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+			gl.vertexAttribPointer(program.attributes['a_normal'], 3, gl.FLOAT, false, 0, 0);
+			if(!isSphereMapped) {
+				gl.enableVertexAttribArray(program.attributes['a_texCoord']);
+				gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.texcoords);
+				gl.vertexAttribPointer(program.attributes['a_texCoord'], 2, gl.FLOAT, false, 0, 0);
+			}
+			else
+				gl.disableVertexAttribArray(program.attributes['a_texCoord']);
+			gl.drawArrays(gl.TRIANGLES, 0, mesh.compiled.coordCount);
+			break;
+		default:
+			break;
+		}
+	}
+};
+
+JSC3D.WebGLRenderBackend.prototype.renderPickingPass = function(renderList, transformMat4, defaultMaterial) {
+	var gl = this.gl;
+
+	gl.disable(gl.BLEND);
+	gl.enable(gl.DEPTH_TEST);
+	gl.depthMask(true);
+	gl.frontFace(gl.CCW);
+
+	gl.viewport(0, 0, this.pickingFB.width, this.pickingFB.height);
+	gl.clearColor(0, 0, 0, 1);
+	gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+	gl.useProgram(this.programs.picking);
+
+	for(var i=0; i<renderList.length; i++) {
+		var mesh = renderList[i];
+		if(mesh.isTrivial() || !mesh.visible)
+			continue;
+
+		// skip the mesh if it is totally transparent
+		var material = mesh.material || defaultMaterial;
+		if(material.transparency > 0.99)
+			continue;
+
+		if(mesh.isDoubleSided)
+			gl.disable(gl.CULL_FACE);
+		else
+			gl.enable(gl.CULL_FACE);
+
+		gl.uniformMatrix4fv(this.programs.picking.uniforms['u_transformMatrix'], false, transformMat4);
+		gl.uniform3fv(this.programs.picking.uniforms['u_pickingId'], mesh.compiled.pickingId);
+		gl.enableVertexAttribArray(this.programs.picking.attributes['a_position']);
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+		gl.vertexAttribPointer(this.programs.picking.attributes['a_position'], 3, gl.FLOAT, false, 0, 0);
+
+		switch(mesh.compiled.remderMode) {
+		case 'point':
+			gl.drawArrays(gl.POINTS, 0, mesh.compiled.coordCount);
+			break;
+		case 'wireframe':
+			//TODO: implement this
+			break;
+		case 'flat':
+		case 'smooth':
+		case 'texture':
+		case 'textureflat':
+		case 'texturesmooth':
+		default:
+			gl.drawArrays(gl.TRIANGLES, 0, mesh.compiled.coordCount);
+			break;
+		}
+	}
+};
+
+JSC3D.WebGLRenderBackend.prototype.compileMesh = function(mesh, renderMode) {
+	if(mesh.isTrivial())
+		return false;
+
+	renderMode = mesh.renderMode || renderMode;
+
+	var gl = this.gl;
+
+	var needFlat = (renderMode == 'flat') || (renderMode == 'textureflat');
+
+	var hasTrianglesOnly = mesh.indexBuffer.length == 4 * mesh.faceCount;
+	var hasTextureCoords = mesh.texCoordBuffer && mesh.texCoordBuffer.length >= 2;
+
+	var ibuf  = mesh.indexBuffer;
+	var vbuf  = mesh.vertexBuffer;
+	var tbuf  = mesh.texCoordBuffer;
+	var tibuf = mesh.texCoordIndexBuffer || ibuf;
+	var nbuf  = mesh.vertexNormalBuffer;
+	var nibuf = mesh.vertexNormalIndexBuffer || ibuf;
+	var fnbuf = mesh.faceNormalBuffer;
+	var numOfFaces = mesh.faceCount;
+
+	if (!mesh.compiled) {
+		/*
+		 * Rebuild all primitives from scratch.
+		 */
+
+		mesh.compiled = {
+			isIndexed: false
+		};
+
+		mesh.compiled.pickingId = new Float32Array([
+			(mesh.internalId & 0xff0000) / 16777216, (mesh.internalId & 0xff00) / 65536, (mesh.internalId & 0xff) / 256
+		]);
+
+		var triangles, edges, coords, normals, texcoords;
+		if(hasTrianglesOnly) {
+			coords = new Float32Array(9 * numOfFaces);
+			normals = new Float32Array(9 * numOfFaces);
+			if(hasTextureCoords)
+				texcoords = new Float32Array(6 * numOfFaces);
+			var v0, v1, v2;
+			var n0, n1, n2;
+			var t0, t1, t2;
+			for(var i=0, j=0, k=0, faceIndex=0; i<ibuf.length; i+=4, j+=9, k+=6, faceIndex++) {
+				v0 = ibuf[i    ] * 3;
+				v1 = ibuf[i + 1] * 3;
+				v2 = ibuf[i + 2] * 3;
+				coords[j    ] = vbuf[v0    ];
+				coords[j + 1] = vbuf[v0 + 1];
+				coords[j + 2] = vbuf[v0 + 2];
+				coords[j + 3] = vbuf[v1    ];
+				coords[j + 4] = vbuf[v1 + 1];
+				coords[j + 5] = vbuf[v1 + 2];
+				coords[j + 6] = vbuf[v2    ];
+				coords[j + 7] = vbuf[v2 + 1];
+				coords[j + 8] = vbuf[v2 + 2];
+
+				if(needFlat) {
+					n0 = faceIndex * 3;
+					normals[j    ] = normals[j + 3] = normals[j + 6] = fnbuf[n0    ];
+					normals[j + 1] = normals[j + 4] = normals[j + 7] = fnbuf[n0 + 1];
+					normals[j + 2] = normals[j + 5] = normals[j + 8] = fnbuf[n0 + 2];
+					
+				}
+				else {
+					n0 = nibuf[i    ] * 3;
+					n1 = nibuf[i + 1] * 3;
+					n2 = nibuf[i + 2] * 3;
+					normals[j    ] = nbuf[n0    ];
+					normals[j + 1] = nbuf[n0 + 1];
+					normals[j + 2] = nbuf[n0 + 2];
+					normals[j + 3] = nbuf[n1    ];
+					normals[j + 4] = nbuf[n1 + 1];
+					normals[j + 5] = nbuf[n1 + 2];
+					normals[j + 6] = nbuf[n2    ];
+					normals[j + 7] = nbuf[n2 + 1];
+					normals[j + 8] = nbuf[n2 + 2];
+				}
+
+				if(hasTextureCoords) {
+					t0 = tibuf[i    ] * 2;
+					t1 = tibuf[i + 1] * 2;
+					t2 = tibuf[i + 2] * 2;
+					texcoords[k    ] = tbuf[t0    ];
+					texcoords[k + 1] = tbuf[t0 + 1];
+					texcoords[k + 2] = tbuf[t1    ];
+					texcoords[k + 3] = tbuf[t1 + 1];
+					texcoords[k + 4] = tbuf[t2    ];
+					texcoords[k + 5] = tbuf[t2 + 1];
+				}
+			}
+		}
+		else {
+			coords = [];
+			normals = [];
+			if(hasTextureCoords)
+				texcoords = [];
+			var v0, v1, v2;
+			var n0, n1, n2;
+			var t0, t1, t2;
+			for(var i=0, j=0; i<numOfFaces; i++) {
+				v0 = ibuf[j    ] * 3;
+				v1 = ibuf[j + 1] * 3;
+				n0 = nibuf[j    ] * 3;
+				n1 = nibuf[j + 1] * 3;
+				if(hasTextureCoords) {
+					t0 = tibuf[j    ] * 2;
+					t1 = tibuf[j + 1] * 2;
+				}
+				j += 2;
+				while(ibuf[j] >= 0) {
+					v2 = ibuf[j] * 3;
+					coords.push(vbuf[v0], vbuf[v0 + 1], vbuf[v0 + 2], vbuf[v1], vbuf[v1 + 1], vbuf[v1 + 2], vbuf[v2], vbuf[v2 + 1], vbuf[v2 + 2]);
+					v1 = v2;
+					if(needFlat) {
+						n0 = i * 3;
+						normals.push(fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2], fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2], fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2]);
+					}
+					else {
+						n2 = nibuf[j] * 3;
+						normals.push(nbuf[n0], nbuf[n0 + 1], nbuf[n0 + 2], nbuf[n1], nbuf[n1 + 1], nbuf[n1 + 2], nbuf[n2], nbuf[n2 + 1], nbuf[n2 + 2]);
+						n1 = n2;
+					}
+					if(hasTextureCoords) {
+						t2 = tibuf[j] * 2;
+						texcoords.push(tbuf[t0], tbuf[t0 + 1], tbuf[t1], tbuf[t1 + 1], tbuf[t2], tbuf[t2 + 1]);
+						t1 = t2;
+					}
+					j++;
+				}
+				j++;
+			}
+			coords = new Float32Array(coords);
+			normals = new Float32Array(normals);
+			if(hasTextureCoords)
+				texcoords = new Float32Array(texcoords);
+		}
+
+		mesh.compiled.coords = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.coords);
+		gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW);
+		mesh.compiled.normals = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+		gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
+		if(hasTextureCoords) {
+			mesh.compiled.texcoords = gl.createBuffer();
+			gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.texcoords);
+			gl.bufferData(gl.ARRAY_BUFFER, texcoords, gl.STATIC_DRAW);
+		}
+		gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+		mesh.compiled.faceCount = numOfFaces;
+		mesh.compiled.coordCount = coords.length / 3;
+	}
+	else {
+		/*
+		 * Do not need to rebuild, just update normal data.
+		 */
+
+		var isFlat = (mesh.compiled.remderMode == 'flat') || (mesh.compiled.remderMode == 'textureflat');
+		if(isFlat != needFlat) {
+			var normals;
+			if(hasTrianglesOnly) {
+				normals = new Float32Array(9 * numOfFaces);
+				var n0, n1, n2
+				for(var i=0, j=0, faceIndex=0; i<ibuf.length; i+=4, j+=9, faceIndex++) {
+					if(needFlat) {
+						n0 = faceIndex * 3;
+						normals[j    ] = normals[j + 3] = normals[j + 6] = fnbuf[n0    ];
+						normals[j + 1] = normals[j + 4] = normals[j + 7] = fnbuf[n0 + 1];
+						normals[j + 2] = normals[j + 5] = normals[j + 8] = fnbuf[n0 + 2];
+						
+					}
+					else {
+						n0 = nibuf[i    ] * 3;
+						n1 = nibuf[i + 1] * 3;
+						n2 = nibuf[i + 2] * 3;
+						normals[j    ] = nbuf[n0    ];
+						normals[j + 1] = nbuf[n0 + 1];
+						normals[j + 2] = nbuf[n0 + 2];
+						normals[j + 3] = nbuf[n1    ];
+						normals[j + 4] = nbuf[n1 + 1];
+						normals[j + 5] = nbuf[n1 + 2];
+						normals[j + 6] = nbuf[n2    ];
+						normals[j + 7] = nbuf[n2 + 1];
+						normals[j + 8] = nbuf[n2 + 2];
+					}
+				}
+			}
+			else {
+				normals = [];
+				var n0, n1, n2;
+				for(var i=0, j=0; i<numOfFaces; i++) {
+					n0 = nibuf[j++] * 3;
+					n1 = nibuf[j++] * 3;
+					while(ibuf[j] >= 0) {
+						if(needFlat) {
+							n0 = i * 3;
+							normals.push(fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2], fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2], fnbuf[n0], fnbuf[n0 + 1], fnbuf[n0 + 2]);
+						}
+						else {
+							n2 = nibuf[j] * 3;
+							normals.push(nbuf[n0], nbuf[n0 + 1], nbuf[n0 + 2], nbuf[n1], nbuf[n1 + 1], nbuf[n1 + 2], nbuf[n2], nbuf[n2 + 1], nbuf[n2 + 2]);
+							n1 = n2;
+						}
+						j++;
+					}
+					j++;
+				}
+				normals = new Float32Array(normals);
+			}
+
+			if(this.isIE11) {
+				// IE11 does not support bufferSubData() for buffer content update. So the normal VBO has to be reallocated for the new data.
+				gl.deleteBuffer(mesh.compiled.normals);
+				mesh.compiled.normals = gl.createBuffer();
+				gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+				gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
+				gl.bindBuffer(gl.ARRAY_BUFFER, null);
+			}
+			else {
+				gl.bindBuffer(gl.ARRAY_BUFFER, mesh.compiled.normals);
+				gl.bufferSubData(gl.ARRAY_BUFFER, 0, normals);
+				gl.bindBuffer(gl.ARRAY_BUFFER, null);
+			}
+		}
+	}
+
+	mesh.compiled.remderMode = renderMode;
+
+	return true;
+};
+
+JSC3D.WebGLRenderBackend.prototype.compileMaterial = function(material) {
+	var gl = this.gl;
+
+	material.compiled = {
+		diffColor: new Float32Array([(material.diffuseColor & 0xff0000) / 16777216, (material.diffuseColor & 0xff00) / 65536, (material.diffuseColor & 0xff) / 256])
+	};
+
+	var rgba = new Uint8Array((new Uint32Array(material.getPalette())).buffer);
+	// the sequence should be converted from BGRA to RGBA by swapping each 1st and 3rd components
+	//TODO: this only works on Little-Endian platforms. We shall also take into account the case for Big-Endian.
+	for(var i=0; i<rgba.length; i+=4) {
+		var tmp = rgba[i];
+		rgba[i] = rgba[i + 2];
+		rgba[i + 2] = tmp;
+	}
+
+	material.compiled.palette = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, material.compiled.palette);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	gl.bindTexture(gl.TEXTURE_2D, null);
+
+	return true;
+};
+
+JSC3D.WebGLRenderBackend.prototype.compileTexture = function(texture, genMipmap) {
+	if(!texture.hasData())
+		return false;
+
+	genMipmap = genMipmap || texture.hasMipmap();
+
+	var gl = this.gl;
+
+	texture.compiled = {
+		hasMipmap: genMipmap
+	};
+
+	var rgba = new Uint8Array((new Uint32Array(texture.data)).buffer);
+	// convert the sequence from BGRA to RGBA by swapping each 1st and 3rd components
+	//TODO: also take into account the case for Big-Endian?
+	for(var i=0; i<rgba.length; i+=4) {
+		var tmp = rgba[i];
+		rgba[i] = rgba[i + 2];
+		rgba[i + 2] = tmp;
+	}
+
+	texture.compiled.tex = gl.createTexture();
+	gl.bindTexture(gl.TEXTURE_2D, texture.compiled.tex);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texture.width, texture.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, rgba);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, genMipmap ? gl.LINEAR_MIPMAP_NEAREST : gl.LINEAR);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+	if(genMipmap)
+		gl.generateMipmap(gl.TEXTURE_2D);
+	gl.bindTexture(gl.TEXTURE_2D, null);
+
+	return true;
+};