freya/webgl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

initial

Browse source
This commit is contained in:
Tyler Murphy 2023-01-18 09:30:41 -05:00
commit a28e995202
11 changed files with 1224 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

13
index.js Normal file
View file

@ -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}`)
})

1018
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

14
package.json Normal file
View file

@ -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"
}
}

16
public/index.html Normal file
View file

@ -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>

44
public/js/buffer.js Normal file
View file

@ -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)
}
}

12
public/js/file.js Normal file
View file

@ -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
}
}

38
public/js/gl.js Normal file
View file

@ -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()

50
public/js/shader.js Normal file
View file

@ -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
}

7
public/shader/simple.frag Normal file
View file

@ -0,0 +1,7 @@
precision mediump float;
varying vec3 color_pass;
void main() {
gl_FragColor = vec4(color_pass, 1.0);
}

11
public/shader/simple.vert Normal file
View file

@ -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);
}