Basics of WebGL extended with Shadertoy new project description.
Introduction to WebGL@Krzychukula
View Slide
Plan1. Intro2. How it all works3. Triangle in WebGL4. Multiple colours5. Our own Shadertoy6. Learn
Disclaimer:mental modelsovercorrectness
NO SHINY DEMOS
ASK QUESTIONS!
Data Visualisation
Shadertoy
2. How it all works?
Back in the old days…
Graphic Card
Map Reduce?
What is WebGL?
History
Shaders
VertexFragment
Vertex ShaderFragment Shader
It has to be FAST
Vertex Shadervoid main() {gl_Position = vec4(0.0, 0.0, 0.0, 1.0);}
Vertex Shaderattribute vec4 a_Position;void main() {gl_Position = a_Position;}
Fragment Shadervoid main() {gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);}
Fragment Shaderuniform vec4 u_Color;void main() {gl_FragColor = u_Color;}
But… What about JS?
Contextvar gl = canvas.getContext("webgl");
Compile Vertex Shadervar vertexShader = gl.createShader(gl.VERTEX_SHADER)gl.shaderSource(vertexShader, `void main() { … }`)gl.compileShader(vertexShader)
Compile Fragment Shadervar fragShader = gl.createShader(gl.FRAGMENT_SHADER)gl.shaderSource(fragShader, `void main() { … }`)gl.compileShader(fragShader)
Programvar program = gl.createProgram()gl.attachShader(program, vertexShader)gl.attachShader(program, fragmentShader)gl.linkProgram(program)
u_Colorvar u_Color = gl.getUniformLocation(program,‘u_Color’);gl.uniform4fv(u_Color, [0.0, 1.0, 0.0, 1.0]);
1-11
-0.5, -0.5
-0.5, -0.5 0.5, -0.5
-0.5, -0.50, 0.50.5, -0.5
gl_Position = vec4(0.0, 0.5, 0.0, 1.0);-0.5, -0.50, 0.5-0.5, 0.5
gl_Position = vec4(0.0, 0.5, 0.0, 1.0);gl_Position = vec4(-0.5, -0.5, 0.0, 1.0); gl_Position = vec4(0.5, -0.5, 0.0, 1.0);-0.5, -0.50, 0.5-0.5, 0.5
var positions = new Float32Array([-0.5, -0.5, 0.0, 1.0,0.5, -0.5, 0.0, 1.0,0.0, 0.5, 0.0, 1.0]);
Buffers
var buffer = gl.createBuffer()gl.bindBuffer(gl.ARRAY_BUFFER, buffer)gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
var positions = new Float32Array([0.0, 0.5, 0.0, 1.0,-0.5, -0.5, 0.0, 1.0,0.5, -0.5, 0.0, 1.0]);
var a_Position = gl.getAttribLocation(program, ‘a_Position')gl.enableVertexAttribArray(a_Position)gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 3)
Fragment Shaderattribute vec4 a_Color;void main() {gl_FragColor = a_Color;}
varyingVertex ShadersFragment Shadersattributes
Vertex Shaderattribute vec4 a_Position;attribute vec4 a_Color;varying vec4 v_Color;void main() {gl_Position = a_Position;v_Color = a_Color;}
Vertex Shadervoid main(vec4 a_Position, vec4 a_Color) {return {gl_Position: a_Position,v_Color: a_Color};}
v_Color = vec4(1.0, 0.0, 0.0, 1.0);v_Color = vec4(0.0, 1.0, 0.0, 1.0); v_Color = vec4(0.0, 0.0, 1.0, 1.0);
What about the middle?
Fragment Shadervarying vec4 v_Color;void main() {gl_FragColor = v_Color;}
var colors = new Float32Array([1.0, 0.0, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,0.0, 0.0, 1.0, 1.0]);
var buffer = gl.createBuffer()gl.bindBuffer(gl.ARRAY_BUFFER, buffer)gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
var a_Color = gl.getAttribLocation(program, ‘a_Color')gl.enableVertexAttribArray(a_Color)gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 0, 0)
-1, -1-1, 1 1, 1
-1, -1 1, -11, 1
var vertices = new Float32Array([// X, Y,-1.0, 1.0,1.0, 1.0,-1.0, -1.0,-1.0, -1.0,1.0, 1.0,1.0, -1.0,])In JavaScript
void mainImage( out vec4 fragColor, in vec2 fragCoord ){fragColor = vec4(0.0,0.0,1.0,1.0);}
out vec4 fragColor
in vec2 fragCoord
in vec2 iResolution
in float iTime
void mainImage( out vec4 fragColor, in vec2 fragCoord ){vec2 uv = fragCoord.xy / iResolution.xy;fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0);}
void mainImage( out vec4 fragColor, in vec2 fragCoord ){vec2 uv = fragCoord.xy / iResolution.xy;fragColor = vec4(uv, 0.5+0.5*sin(iTime),1.0);}
fragColor = vec4(uv.r, uv.g, 1.0, 1.0);
void mainImage( out vec4 fragColor, in vec2 fragCoord ){vec2 uv = fragCoord.xy / iResolution.xy;fragColor = vec4(uv, 0.5+0.5*sin(iTime), 1.0);}
Demo?
What to learn from?
WebGL Beginner’s GuideDiego Cantor & Brandon Jones
Interactive 3D GraphicsEric Haines & Gundega Dekena
WebGL ProgrammingGuideKouichi Matsuda & Rodger Lea
The End@Krzychukula
https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/https://www.chromeexperiments.com/globehttps://handmadehero.org/https://codepen.io/krzychukula/pen/qmZaMz?editors=0010 Trianglehttps://codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colorshttps://codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors in one bufferhttps://codepen.io/krzychukula/pen/qVrLww Similar to new Shadertoy in WebGLhttps://www.shadertoy.com/newhttps://www.packtpub.com/game-development/webgl-beginners-guidehttps://www.udacity.com/course/interactive-3d-graphics--cs291https://sites.google.com/site/webglbook/