diff --git a/src/js/libpannellum.js b/src/js/libpannellum.js index 4d90ed1..2e1f5af 100644 --- a/src/js/libpannellum.js +++ b/src/js/libpannellum.js @@ -41,7 +41,7 @@ function Renderer(canvas, image, imageType) { this.init = function(haov, vaov, voffset) { // Enable WebGL on canvas - gl = this.canvas.getContext('experimental-webgl'); + gl = this.canvas.getContext('experimental-webgl', {alpha: false, depth: false}); var glBindType = gl.TEXTURE_2D; // Create viewport for entire canvas and clear canvas @@ -144,6 +144,24 @@ function Renderer(canvas, image, imageType) { program.vertPosLocation = gl.getAttribLocation(program, "a_vertCoord"); gl.enableVertexAttribArray(program.vertPosLocation); + // Create buffers + program.cubeVertBuf = gl.createBuffer(); + program.cubeVertTexCoordBuf = gl.createBuffer(); + program.cubeVertIndBuf = gl.createBuffer(); + + // Bind texture coordinate buffer and pass coordinates to WebGL + gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertTexCoordBuf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0,0,1,0,1,1,0,1]), gl.STATIC_DRAW); + + // Bind square index buffer and pass indicies to WebGL + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, program.cubeVertIndBuf); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2,0,2,3]), gl.STATIC_DRAW); + + // Find uniforms + program.perspUniform = gl.getUniformLocation(program, "u_perspMatrix"); + program.cubeUniform = gl.getUniformLocation(program, "u_cubeMatrix"); + //program.colorUniform = gl.getUniformLocation(program, "u_color"); + program.level = -1; program.currentNodes = []; @@ -167,9 +185,6 @@ function Renderer(canvas, image, imageType) { gl.drawArrays(gl.TRIANGLES, 0, 6); } else { - // Clear canvas - //gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - // Create perspective matrix var perspMatrix = this.makePersp(hfov, this.canvas.width / this.canvas.height, 0.1, 100.0); @@ -183,10 +198,8 @@ function Renderer(canvas, image, imageType) { matrix = this.makeMatrix4(matrix); // Set matrix uniforms - var perspUniform = gl.getUniformLocation(program, "u_perspMatrix"); - gl.uniformMatrix4fv(perspUniform, false, new Float32Array(this.transposeMatrix4(perspMatrix))); - var cubeUniform = gl.getUniformLocation(program, "u_cubeMatrix"); - gl.uniformMatrix4fv(cubeUniform, false, new Float32Array(this.transposeMatrix4(matrix))); + gl.uniformMatrix4fv(program.perspUniform, false, new Float32Array(this.transposeMatrix4(perspMatrix))); + gl.uniformMatrix4fv(program.cubeUniform, false, new Float32Array(this.transposeMatrix4(matrix))); // Find current nodes var rotPersp = this.rotatePersp(perspMatrix, matrix); @@ -220,52 +233,22 @@ function Renderer(canvas, image, imageType) { program.drawInProgress = true; //console.log(program.currentNodes.length); for ( var i = 0; i < program.currentNodes.length; i++ ) { - //var color = program.currentNodes[i].color; - //gl.uniform4f(gl.getUniformLocation(program, "u_color"), color[0], color[1], color[2], 1.0); - - // Create and bind vertex buffer - program.cubeVertBuf = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertBuf); - - // Create cube vertices - program.vertices = program.currentNodes[i].vertices; - - // Pass vertices to WebGL - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(program.vertices), gl.STATIC_DRAW); - - // Create and bind texture buffer - program.cubeVertTexCoordBuf = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertTexCoordBuf); - - // Generate texture coordinates and pass to WebGL - var texCoords = [0, 0, 1, 0, 1, 1, 0, 1]; - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW); - - // Create and bind square index buffer - program.cubeVertIndBuf = gl.createBuffer(); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, program.cubeVertIndBuf); - - // Generate indicies and pass to WebGL - var cubeVertInd = [0,1,2,0,2,3]; - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertInd), gl.STATIC_DRAW); - - // Bind square vertices - gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertBuf); - gl.vertexAttribPointer(program.vertPosLocation, 3, gl.FLOAT, false, 0, 0); - - // Bind square indicies - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, program.cubeVertIndBuf); - - // Prep for texture - gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertTexCoordBuf); - gl.vertexAttribPointer(program.texCoordLocation, 2, gl.FLOAT, false, 0, 0); - gl.activeTexture(gl.TEXTURE0); // Make TEXTURE0 the active texture - gl.uniform1i(gl.getUniformLocation(program, "u_sampler"), 0); // Tell shader to use TEXTURE0 - - // Bind texture and draw tile if (program.currentNodes[i].textureLoaded) { - gl.bindTexture(gl.TEXTURE_2D, program.currentNodes[i].texture); // Bind program.currentNodes[i].texture to TEXTURE0 - gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); + //var color = program.currentNodes[i].color; + //gl.uniform4f(program.colorUniform, color[0], color[1], color[2], 1.0); + + // Bind vertex buffer and pass vertices to WebGL + gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertBuf); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(program.currentNodes[i].vertices), gl.STATIC_DRAW); + gl.vertexAttribPointer(program.vertPosLocation, 3, gl.FLOAT, false, 0, 0); + + // Prep for texture + gl.bindBuffer(gl.ARRAY_BUFFER, program.cubeVertTexCoordBuf); + gl.vertexAttribPointer(program.texCoordLocation, 2, gl.FLOAT, false, 0, 0); + + // Bind texture and draw tile + gl.bindTexture(gl.TEXTURE_2D, program.currentNodes[i].texture); // Bind program.currentNodes[i].texture to TEXTURE0 + gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); } } } @@ -298,7 +281,7 @@ function Renderer(canvas, image, imageType) { if (!inCurrent) { //node.color = [Math.random(), Math.random(), Math.random()]; node.timestamp = program.nodeCacheTimestamp++; - this.processNextTile(node, pitch, yaw, hfov); + setTimeout(this.processNextTile(node, pitch, yaw, hfov), 0); program.currentNodes.push(node); program.nodeCache.push(node); } @@ -645,9 +628,9 @@ var fragEquirectangular = [ // Fragment shader var fragMulti = [ -'varying highp vec2 v_texCoord;', +'varying mediump vec2 v_texCoord;', 'uniform sampler2D u_sampler;', -//'uniform highp vec4 u_color;', +//'uniform mediump vec4 u_color;', 'void main(void) {', // Look up color from texture