initial

2023-01-18 09:30:41 -05:00 · 2023-01-18 09:30:41 -05:00 · a28e995202
commit a28e995202
11 changed files with 1224 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/index.js
+++ b/index.js
@ -0,0 +1,13 @@
+const express = require('express')
+const app = express()
+const port = 8080
+
+app.use(express.static('public'))
+
+app.get('/', (req, res) => {
+  res.sendFile('index.html')
+})
+
+app.listen(port, () => {
+  console.log(`App listening on port http://127.0.0.1:${port}`)
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
+{
+  "name": "webgl",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "Tyler Murphy",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}
--- a/public/index.html
+++ 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>
--- a/public/js/buffer.js
+++ 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)
+    }
+
+}
--- a/public/js/file.js
+++ 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
+    }
+    
+}
--- a/public/js/gl.js
+++ 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()
--- a/public/js/shader.js
+++ 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
+}
--- a/public/shader/simple.frag
+++ 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);
+}
--- a/public/shader/simple.vert
+++ 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); 
+}