Skip to content

Instantly share code, notes, and snippets.

@bellbind
Last active June 20, 2022 17:40
Show Gist options
  • Save bellbind/55e65a54483c960db82c to your computer and use it in GitHub Desktop.
Save bellbind/55e65a54483c960db82c to your computer and use it in GitHub Desktop.
[webgl] Raw webgl-1.0 program
#version 100
precision highp float;
uniform vec2 screen;
void main(void)
{
vec2 coord = gl_FragCoord.xy / screen;
float other = 1.0 - (coord.x + coord.y) / 2.0;
gl_FragColor = vec4(coord, other, 1.0);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="data:image/x-icon;" />
<script src="script.js"></script>
</head>
<body></body>
</html>
"use strict";
window.addEventListener("load", ev => {
// webgl setup
const canvas = document.createElement("canvas");
canvas.width = 512, canvas.height = 512;
canvas.style.border = "solid";
document.body.appendChild(canvas);
const gl = canvas.getContext("webgl");
gl.enable(gl.CULL_FACE);
// drawing data
const vert2d = [[1, 1], [-1, 1], [1, -1], [-1, -1]];
const vert2dArray = new Float32Array([].concat(...vert2d));
const index = [[0, 1, 2], [3, 2, 1]];
const indexArray = new Uint16Array([].concat(...index));
// store buffer data
const vertBuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
gl.bufferData(gl.ARRAY_BUFFER, vert2dArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
const indexBuf = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexArray, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
const loadShader = (src, type) => {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.log(src, gl.getShaderInfoLog(shader));
}
return shader;
};
const loadProgram = () => Promise.all([
fetch("vertex.glsl").then(res => res.text()).then(
src => loadShader(src, gl.VERTEX_SHADER)),
fetch("fragment.glsl").then(res => res.text()).then(
src => loadShader(src, gl.FRAGMENT_SHADER))
]).then(shaders => {
const program = gl.createProgram();
shaders.forEach(shader => gl.attachShader(program, shader));
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.log(gl.getProgramInfoLog(program));
};
return program;
});
const initVariables = (program) => {
// bind program data
gl.useProgram(program);
// uniform data
const screenId = gl.getUniformLocation(program, "screen");
gl.uniform2f(screenId, canvas.width, canvas.height);
// map shader attribute with the buffer element
const vert2dId = gl.getAttribLocation(program, "vert2d");
const elem = gl.FLOAT, count = vert2d[0].length, normalize = false;
const offset = 0, stride = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
gl.enableVertexAttribArray(vert2dId);
gl.vertexAttribPointer(
vert2dId, count, elem, normalize, offset, stride);
// unbind
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.useProgram(null);
return program;
};
const startRendering = (program) => {
requestAnimationFrame(function loop() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gl.drawArrays(gl.TRIANGLE_STRIP, 0, vert2d.length);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertBuf);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuf);
const indexOffset = 0 * index[0].length;
gl.drawElements(gl.TRIANGLES, indexArray.length,
gl.UNSIGNED_SHORT, indexOffset);
console.log(gl.getError());
//requestAnimationFrame(loop);
});
};
loadProgram().then(initVariables).then(startRendering);
}, false);
#version 100
invariant gl_Position;
attribute vec2 vert2d;
void main(void) {
gl_Position = vec4(vert2d, 0, 1);
}
@bellbind
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment