diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.html | 16 | ||||
| -rw-r--r-- | public/js/buffer.js | 44 | ||||
| -rw-r--r-- | public/js/file.js | 12 | ||||
| -rw-r--r-- | public/js/gl.js | 38 | ||||
| -rw-r--r-- | public/js/shader.js | 50 | ||||
| -rw-r--r-- | public/shader/simple.frag | 7 | ||||
| -rw-r--r-- | public/shader/simple.vert | 11 |
7 files changed, 178 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..a5719fe --- /dev/null +++ b/public/index.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>welgl</title> +</head> +<body> + <canvas id="canvas"> + Your browser does not support NTML5 + </canvas> + <script src="js/file.js"></script> + <script src="js/shader.js"></script> + <script src="js/buffer.js"></script> + <script src="js/gl.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/public/js/buffer.js b/public/js/buffer.js new file mode 100644 index 0000000..15da457 --- /dev/null +++ b/public/js/buffer.js @@ -0,0 +1,44 @@ +const Buffer = {} + +let vaos = [] +let vbos = [] + +class Mesh { + + static #vaos = [] + static #vbos = [] + + #count = 0 + + constructor(vertexCount) { + this.id = gl.createVertexArray() + gl.bindVertexArray(this.id) + Mesh.#vaos.push(this.id) + this.vertexCount = vertexCount + } + + store(data, dim) { + let id = gl.createBuffer() + Mesh.#vbos.push(id) + gl.bindBuffer(gl.ARRAY_BUFFER, id) + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW) + gl.vertexAttribPointer(this.#count, dim, gl.FLOAT, false, Float32Array.BYTES_PER_ELEMENT * dim, 0) + gl.enableVertexAttribArray(this.#count) + this.#count++; + return this + } + + finish() { + this.unbind() + return this + } + + bind() { + gl.bindVertexArray(this.id) + } + + unbind() { + gl.bindVertexArray(null) + } + +}
\ No newline at end of file diff --git a/public/js/file.js b/public/js/file.js new file mode 100644 index 0000000..7675abb --- /dev/null +++ b/public/js/file.js @@ -0,0 +1,12 @@ +const File = {} + +File.read = async (path) => { + try { + let data = await fetch(path) + let text = await data.text() + return text + } catch (err) { + return undefined + } + +}
\ No newline at end of file diff --git a/public/js/gl.js b/public/js/gl.js new file mode 100644 index 0000000..0863bf8 --- /dev/null +++ b/public/js/gl.js @@ -0,0 +1,38 @@ +var gl; + +async function main() { + const canvas = document.getElementById("canvas") + gl = canvas.getContext('webgl') + + if(!gl) { + console.log("Your browser does not support webgl") + return + } + + var ext = gl.getExtension('OES_vertex_array_object'); + if(!ext) { + console.log("Your browser does not support webgl 2") + return + } + + + + gl['createVertexArray'] = function() { return ext['createVertexArrayOES'](); }; + gl['deleteVertexArray'] = function(vao) { ext['deleteVertexArrayOES'](vao); }; + gl['bindVertexArray'] = function(vao) { ext['bindVertexArrayOES'](vao); }; + gl['isVertexArray'] = function(vao) { return ext['isVertexArrayOES'](vao); }; + + var shader = await Shader.load("shader/simple.vert","shader/simple.frag") + + var triangle = new Mesh(3) + .store([0.0, 0.5, -0.5, -0.5, 0.5, -0.5], 2) + .store([1.0, 1.0, 0.0, 0.7, 0.0, 1.0, 0.1, 1.0, 0.6], 3) + .finish() + + gl.useProgram(shader) + triangle.bind() + gl.drawArrays(gl.TRIANGLES, 0, triangle.vertexCount) + +} + +main()
\ No newline at end of file diff --git a/public/js/shader.js b/public/js/shader.js new file mode 100644 index 0000000..28a8843 --- /dev/null +++ b/public/js/shader.js @@ -0,0 +1,50 @@ +const Shader = {} + +Shader.load = async (vertexPath, fragmentPath) => { + let vertexCode = await File.read(vertexPath) + if(!vertexCode) { + console.log("Invalid shader path:", vertexPath) + return + } + + let fragmentCode = await File.read(fragmentPath) + if(!fragmentCode) { + console.log("Invalid shader path:", fragmentPath) + return + } + + var vertexShader = gl.createShader(gl.VERTEX_SHADER) + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) + + gl.shaderSource(vertexShader, vertexCode) + gl.shaderSource(fragmentShader, fragmentCode) + + gl.compileShader(vertexShader) + if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { + console.error('Failed to compile ' + vertexPath + '!', gl.getShaderInfoLog(vertexShader)) + return + } + + gl.compileShader(fragmentShader) + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + console.error('Failed to compile ' + fragmentPath + '!', gl.getShaderInfoLog(fragmentShader)) + return + } + + var program = gl.createProgram() + gl.attachShader(program, vertexShader) + gl.attachShader(program, fragmentShader) + gl.linkProgram(program) + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + console.error("Failed to link shader program!", gl.getProgramInfoLog(program)); + return + } + + gl.validateProgram(program); + if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) { + console.error("Failed to validate shader program!", gl.getProgramInfoLog(program)); + return + } + + return program +}
\ No newline at end of file diff --git a/public/shader/simple.frag b/public/shader/simple.frag new file mode 100644 index 0000000..d23373f --- /dev/null +++ b/public/shader/simple.frag @@ -0,0 +1,7 @@ +precision mediump float; + +varying vec3 color_pass; + +void main() { + gl_FragColor = vec4(color_pass, 1.0); +}
\ No newline at end of file diff --git a/public/shader/simple.vert b/public/shader/simple.vert new file mode 100644 index 0000000..801b91d --- /dev/null +++ b/public/shader/simple.vert @@ -0,0 +1,11 @@ +precision mediump float; + +attribute vec2 position; +attribute vec3 color; + +varying vec3 color_pass; + +void main() { + color_pass = color; + gl_Position = vec4(position, 0.0, 1.0); +}
\ No newline at end of file |