diff --git a/index.html b/index.html index 26d080e..2961c6e 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,7 @@ - - +

Panorama Viewer

diff --git a/panorama-viewer.js b/panorama-viewer.js index f8fc6ab..3d9cb81 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -1,56 +1,63 @@ +"use strict"; +(() => { + window.addEventListener("load", () => { + let viewer = document.getElementById("viewer"); + render(viewer); + }); -export const render = (canvas) => { - let gl = canvas.getContext("webgl"); + const render = (canvas) => { + let gl = canvas.getContext("webgl2"); - const vShaderSrc = ` - attribute vec3 position; + const vShaderSrc = ` + attribute vec3 position; - void main() { - gl_Position = vec4(position, 1); + void main() { + gl_Position = vec4(position, 1); + } + `; + + const fShaderSrc = ` + void main() { + gl_FragColor = vec4(0.5, 0.5, 0, 1); + } + `; + + const compileShader = (src, type) => { + let shader = gl.createShader(type); + gl.shaderSource(shader, src); + gl.compileShader(shader); + let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); + if (!success) { + throw gl.getShaderInfoLog(vShader); + } + return shader; } - `; - const fShaderSrc = ` - void main() { - gl_FragColor = vec4(0.5, 0.5, 0, 1); - } - `; + let vShader = compileShader(vShaderSrc, gl.VERTEX_SHADER); + let fShader = compileShader(fShaderSrc, gl.FRAGMENT_SHADER); - const compileShader = (src, type) => { - let shader = gl.createShader(type); - gl.shaderSource(shader, src); - gl.compileShader(shader); - let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); + let program = gl.createProgram(); + gl.attachShader(program, vShader); + gl.attachShader(program, fShader); + gl.linkProgram(program); + let success = gl.getProgramParameter(program, gl.LINK_STATUS); if (!success) { - throw gl.getShaderInfoLog(vShader); + throw gl.getProgramInfoLog(program); } - return shader; - } + gl.useProgram(program); - let vShader = compileShader(vShaderSrc, gl.VERTEX_SHADER); - let fShader = compileShader(fShaderSrc, gl.FRAGMENT_SHADER); - - let program = gl.createProgram(); - gl.attachShader(program, vShader); - gl.attachShader(program, fShader); - gl.linkProgram(program); - let success = gl.getProgramParameter(program, gl.LINK_STATUS); - if (!success) { - throw gl.getProgramInfoLog(program); - } - gl.useProgram(program); - - let vertexBuffer = gl.createBuffer(); - let vertices = new Float32Array([ - 0, 0, 0, - 1, 0, 0, - 1, 1, 0, - ]); - gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); - - let positionLocation = gl.getAttribLocation(program, "position"); - gl.enableVertexAttribArray(positionLocation); - gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0); - gl.drawArrays(gl.TRIANGLES, 0, 3); -} \ No newline at end of file + let vertexBuffer = gl.createBuffer(); + let vertices = new Float32Array([ + 0, 0, 0, + 1, 0, 0, + 1, 1, 0, + ]); + gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); + gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); + + let positionLocation = gl.getAttribLocation(program, "position"); + gl.enableVertexAttribArray(positionLocation); + gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 4*3, 0); + gl.drawArrays(gl.TRIANGLES, 0, 3); + }; +})(); \ No newline at end of file