diff --git a/index.html b/index.html index 2eba42e..26d080e 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,16 @@

Panorama Viewer

- + \ No newline at end of file diff --git a/panorama-viewer.js b/panorama-viewer.js index 40cd385..f8fc6ab 100644 --- a/panorama-viewer.js +++ b/panorama-viewer.js @@ -1 +1,56 @@ -export const hello = () => console.log("hello world"); \ No newline at end of file + +export const render = (canvas) => { + let gl = canvas.getContext("webgl"); + + const vShaderSrc = ` + attribute vec3 position; + + 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; + } + + 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