Skip to content

Instantly share code, notes, and snippets.

@mathdoodle

mathdoodle/README.md

Last active August 22, 2016 22:03
Show Gist options
  • Save mathdoodle/dcd4dfc33c1ba86f6659d10ffc2984a9 to your computer and use it in GitHub Desktop.
Save mathdoodle/dcd4dfc33c1ba86f6659d10ffc2984a9 to your computer and use it in GitHub Desktop.
Download ZIP
Moving the Point with a uniform
Raw
README.md

Geometry using WebGL from Ground Zero

Overview

A starting point for learning Geometry using the WebGL API.

Raw
displayError.ts
/**
* Displays an exception by writing it to a <pre> element.
*/
export default function displayError(e: any) {
const stderr = <HTMLPreElement>document.getElementById('my-output')
stderr.style.color = "#FF0000"
stderr.innerHTML = `${e}`
}
Raw
getWebGLContext.ts
/**
*
*/
export default function getWebGLContext(canvas: HTMLCanvasElement): WebGLRenderingContext {
let context: WebGLRenderingContext = null;
try {
// Try to grab the standard context. If it fails, fallback to experimental.
context = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
}
catch(e) {
}
if (context) {
return context;
}
else {
throw new Error("Unable to initialize WebGL. Your browser may not support it.");
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<style>
/* STYLE-MARKER */
</style>
<script src="https://jspm.io/system.js"></script>
<!-- SHADERS-MARKER -->
<!-- SCRIPTS-MARKER -->
</head>
<body>
<canvas id='my-canvas' width='500' height='500'>
Your browser does not support the HTML5 canvas element.
</canvas>
<pre id='my-output'></pre>
<script>
// CODE-MARKER
</script>
<script>
System.import('./script.js')
</script>
</body>
</html>
Raw
makeProgram.ts
import displayError from './displayError';
/**
* Creates a WebGLProgram with compiled and linked shaders.
*/
function makeProgramInternal(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string): WebGLProgram {
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
throw new Error(`VERTEX_SHADER: ${gl.getShaderInfoLog(vs)}`);
}
const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
throw new Error(`FRAGMENT_SHADER: ${gl.getShaderInfoLog(fs)}`);
}
const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
throw new Error(gl.getProgramInfoLog(program));
}
return program;
}
export default function makeProgram(gl: WebGLRenderingContext, vertexShader: string, fragmentShader: string): WebGLProgram {
try {
return makeProgramInternal(gl, vertexShader, fragmentShader);
}
catch(e) {
displayError(e);
throw e;
}
}
Raw
package.json
{
"name": "copy-of-copy-of-webgl",
"version": "0.1.0",
"description": "Moving the Point with a uniform",
"dependencies": {
"DomReady": "1.0.0",
"gl-matrix": "2.3.2"
},
"operatorOverloading": true,
"keywords": [
"WebGL",
"shaders",
"low level",
"GLSL",
"Graphics",
"Geometry"
],
"author": "David Geo Holmes"
}
Raw
requestFrame.ts
import displayError from './displayError'
/**
* Catches exceptions thrown in the animation callback and displays them.
*/
export default function requestFrame(callback: FrameRequestCallback): number {
const wrapper: FrameRequestCallback = function(time: number) {
try {
callback(time)
}
catch(e) {
displayError(e)
}
}
return window.requestAnimationFrame(wrapper)
}
Raw
script.ts
import displayError from './displayError'
import getWebGLContext from './getWebGLContext'
import makeProgram from './makeProgram'
import requestFrame from './requestFrame'
const canvas = <HTMLCanvasElement>document.getElementById('my-canvas')
const gl = getWebGLContext(canvas)
const vertexShader = document.getElementById('shader-vs').innerText
const fragmentShader = document.getElementById('shader-fs').innerText
const program = makeProgram(gl, vertexShader, fragmentShader)
gl.useProgram(program)
const vbo = gl.createBuffer()
const data = new Float32Array(2)
try {
data[0] = 0.0
data[1] = 0.0
gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW)
}
catch(e) {
displayError(e)
}
function animate() {
const aVertexPosition = gl.getAttribLocation(program, 'aPosition')
gl.enableVertexAttribArray(aVertexPosition)
gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.POINTS, 0, 1)
}
requestFrame(animate)
Raw
shader-fs.glsl
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
Raw
shader-vs.glsl
/**
* Position relative to the WebGL origin.
*/
attribute vec2 aPosition;
/**
*
*/
uniform vec2 uPosition;
void main(void) {
gl_Position = vec4(aPosition, 0.0, 1.0);
gl_PointSize = 6.0;
}
Raw
style.css
body { background-color: white; }
canvas {
background-color: black;
position: absolute;
left: 15px;
top: 15px;
z-index: 0;
}
pre {
position: relative;
color: rgb(255, 255, 255);
left: 15px;
z-index: 1;
font-size: 18px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment