Skip to content

Instantly share code, notes, and snippets.

@roboshoes
Last active February 16, 2019 09:24
Show Gist options
  • Save roboshoes/26a8f185a556cf9eae361f831d61a92c to your computer and use it in GitHub Desktop.
Save roboshoes/26a8f185a556cf9eae361f831d61a92c to your computer and use it in GitHub Desktop.
Basic setup with no dependencies to render fullscreen fragment shaders.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script id="vertex" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 aPosition;
varying vec2 vUV;
void main() {
gl_Position = vec4( aPosition, 0, 1 );
vUV = aPosition;
}
</script>
<script id="fragment" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vUV;
uniform vec2 uResolution;
const vec4 black = vec4( 0, 0, 0, 1 );
const vec4 white = vec4( 1 );
void main() {
gl_FragColor = mix( white, black, step( 10.0, mod( gl_FragCoord.y, 20.0 ) ) );
}
</script>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
var canvas = document.getElementById( "canvas" );
var gl = canvas.getContext( "webgl" ) || canvas.getContext( "experimental-webgl" );
gl.clearColor( 0, 0, 0, 1 );
gl.disable( gl.DEPTH_TEST );
var vertexShaderSource = document.getElementById( "vertex" ).innerText;
var fragmentShaderSource = document.getElementById( "fragment" ).innerText;
function compileShader( gl, source, type ) {
var shader = gl.createShader( type );
gl.shaderSource( shader, source );
gl.compileShader( shader );
if ( ! gl.getShaderParameter( shader, gl.COMPILE_STATUS ) ) {
console.warn( gl.getShaderInfoLog( shader ) );
gl.deleteShader( shader );
return null;
}
return shader;
}
function makeProgram( gl, vertexShader, fragmentShader ) {
var program = gl.createProgram();
gl.attachShader( program, vertexShader );
gl.attachShader( program, fragmentShader );
gl.linkProgram( program );
gl.validateProgram( program );
if ( ! gl.getProgramParameter( program, gl.LINK_STATUS ) ) {
console.warn( gl.getProgramInfoLog( program ) );
}
gl.useProgram( program );
return program;
}
function makeVertexBuffer( gl ) {
var buffer = gl.createBuffer();
var vertices = [
1.0, 1.0,
-1.0, 1.0,
1.0, -1.0,
-1.0, -1.0,
];
gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( vertices ), gl.STATIC_DRAW );
return buffer;
}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport( 0, 0, canvas.width, canvas.height );
}
// --------------
var vertexBuffer;
var vertexLocation;
var resolutionLocation;
function init() {
var vertexShader = compileShader( gl, vertexShaderSource, gl.VERTEX_SHADER );
var fragmentShader = compileShader( gl, fragmentShaderSource, gl.FRAGMENT_SHADER );
var program = makeProgram( gl, vertexShader, fragmentShader );
vertexLocation = gl.getAttribLocation( program, "aPosition" );
vertexBuffer = makeVertexBuffer( gl );
uniformLocation = gl.getUniformLocation( program, "uResolution" );
gl.enableVertexAttribArray( vertexLocation );
}
function loop() {
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, gl.FALSE, 0, 0 );
gl.uniform2f( resolutionLocation, window.innerWidth, window.innerHeight );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
requestAnimationFrame( loop );
}
init();
resize();
loop();
@roboshoes
Copy link
Author

Keeping the shader source in the DOM is not my favorite, but this seemed appropriate for a minimal setup to render one big rectangle. With custom shaders.

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