cg/webgl-letters
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to WebGL2 to use VAOs (might be fun)

Browse Source
This commit is contained in:
keanutaufan 2024-09-18 22:16:18 +07:00
parent da90785ff3
commit ecfe53f705
No known key found for this signature in database
GPG Key ID: 0E2EF5BE1DA75288
4 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/main.ts
View File

@ -16,14 +16,16 @@ function render() {
throw new Error("Canvas does not exist"); throw new Error("Canvas does not exist");
} }
const gl = canvas.getContext("webgl"); const gl = canvas.getContext("webgl2");
if (!gl) { if (!gl) {
throw new Error("This browser does not support WebGL"); throw new Error("This browser does not support WebGL 2");
} }
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource); const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
const program = loadProgram(gl, vertexShader, fragmentShader); const program = loadProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
const vertexPositionAttribLocation = gl.getAttribLocation(program, "vertexPosition"); const vertexPositionAttribLocation = gl.getAttribLocation(program, "vertexPosition");
if (vertexPositionAttribLocation < 0) { if (vertexPositionAttribLocation < 0) {
@ -33,7 +35,14 @@ function render() {
const verts = new Float32Array(triangle.vertices); const verts = new Float32Array(triangle.vertices);
const buffer = loadBuffer(gl, verts); const buffer = loadBuffer(gl, verts);
drawVertex(gl, program, vertexPositionAttribLocation, buffer, gl.TRIANGLES, verts.length); const fragmentColor = gl.getUniformLocation(program, "uColor");
if (!fragmentColor) {
throw new Error("Uniform uColor not found");
}
gl.uniform4f(fragmentColor, 0.22745, 0.35294, 0.25098, 1.0);
drawVertex(gl, vertexPositionAttribLocation, buffer, gl.TRIANGLES, verts.length);
} }
try { try {

9
src/shaderUtils.ts
View File

@ -1,4 +1,4 @@
export function loadShader(gl: WebGLRenderingContext, type: GLenum, source: string) { export function loadShader(gl: WebGL2RenderingContext, type: GLenum, source: string) {
const shader = gl.createShader(type); const shader = gl.createShader(type);
if (!shader) { if (!shader) {
throw new Error("WebGL fails to create shader for given type"); throw new Error("WebGL fails to create shader for given type");
@ -16,7 +16,7 @@ export function loadShader(gl: WebGLRenderingContext, type: GLenum, source: stri
} }
export function loadProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) { export function loadProgram(gl: WebGL2RenderingContext, vertexShader: WebGLShader, fragmentShader: WebGLShader) {
const program = gl.createProgram(); const program = gl.createProgram();
if (!program) { if (!program) {
throw new Error("WebGL fails to create program"); throw new Error("WebGL fails to create program");
@ -35,11 +35,10 @@ export function loadProgram(gl: WebGLRenderingContext, vertexShader: WebGLShader
} }
export function drawVertex(gl: WebGLRenderingContext, program: WebGLProgram, vertexAttribArrayLocation: GLuint, buffer: WebGLBuffer, mode: GLenum, length: number) { export function drawVertex(gl: WebGL2RenderingContext, vertexAttribArrayLocation: GLuint, buffer: WebGLBuffer, mode: GLenum, length: number) {
gl.clearColor(0.1, 0.1, 0.1, 1.0); gl.clearColor(0.1, 0.1, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
gl.enableVertexAttribArray(vertexAttribArrayLocation); gl.enableVertexAttribArray(vertexAttribArrayLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
@ -56,7 +55,7 @@ export function drawVertex(gl: WebGLRenderingContext, program: WebGLProgram, ver
} }
export function loadBuffer(gl: WebGLRenderingContext, vertices: Float32Array) { export function loadBuffer(gl: WebGL2RenderingContext, vertices: Float32Array) {
const buffer = gl.createBuffer(); const buffer = gl.createBuffer();
if (!buffer) { if (!buffer) {
throw new Error("WebGL fails to create buffer"); throw new Error("WebGL fails to create buffer");

6
src/shaders/basic.frag
View File

@ -1,5 +1,9 @@
#version 300 es
precision mediump float; precision mediump float;
uniform vec4 uColor;
out vec4 fragColor;
void main() { void main() {
gl_FragColor = vec4(0.22745, 0.35294, 0.25098, 1.0); fragColor = uColor;
} }

4
src/shaders/basic.vert
View File

@ -1,5 +1,7 @@
#version 300 es
precision mediump float; precision mediump float;
attribute vec2 vertexPosition;
in vec2 vertexPosition;
void main() { void main() {
gl_Position = vec4(vertexPosition, 0.0, 1.0); gl_Position = vec4(vertexPosition, 0.0, 1.0);