Last active
February 16, 2019 09:24
-
-
Save roboshoes/26a8f185a556cf9eae361f831d61a92c to your computer and use it in GitHub Desktop.
Basic setup with no dependencies to render fullscreen fragment shaders.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.