Intro to 4k intros (Reaktor Dev Day 2013)

Presentation slides from Reaktor Dev Day 2013 -- http://reaktordevday.fi/2013/

Transcript

1. Intro to 4K intros @akisaarinen http://akisaarinen.fi/devday2013/
3. This is what you GET
4. WebGL and shaders? Spinning the cubes Lights and Music How to experiment? 1 2 3 4
5. WebGL Shaders 1 and
6. WebGL in Chrome WebKit engine Canvas element: HTML JavaScript (V8) Init and main loop: JavaScript GPU (physical hardware) Vertex and Fragment shaders: GLSL (GL Shader Language) SW HW
7. Vertices
8. Triangle surfaces
9. Surface normals
10. VERTEX STREAM Vertex Shader Fragment (Pixel) Shader PIXELS = cubes = pos+camera = lights = result
11. Vertex Shader Translation Rotation Scaling ...
12. Fragment Shader Lights Shadows Reflections ...
13. Fragment Shader is THE SHIT
14. What did cube4k eat? 2
15. index.html js/main.js shader/vertex.glsl shader/fragment.glsl Canvas & Audio tags WebGL initialization and main loop Vertex shader (camera & projection) Fragment shader (lighting & effects)
16. cube4k.html
17. var  canvas  =  getElementById("c"); var  gl          =  canvas.getContext("webgl"); JavaScript
18. var  program  =  gl.createProgram(); gl.attachShader(program,  vertex); gl.attachShader(program,  fragment); gl.linkProgram(program); JavaScript
19. function  draw() {    gl.viewport(0,  0,  width,  height);    gl.clear(COLOR_BUFFER_BIT|DEPTH_BUFFER_BIT);    gl.useProgram(program); //  <  PUSH  VERTEX  STREAM  HERE  >    requestAnimationFrame(draw); } JavaScript
20. for  (z=0;  z<9;  z++)  {    for  (y=0;  y<9;  y++)  {        for  (x=0;  x<9;  x++)  {            drawSingleCube(x,y,z);                    }    } } 729 cubes JavaScript
21. mat3  rx(float  t)  {    return  mat3(        1,              0,              0,        0,    cos(t),    -­‐sin(t),        0,    sin(t),      cos(t)    ); } Rotation GLSL
22. LIGHTS and MUSIC 3
23. Lighting N H C L Surface
24. void  main(void)  {    vec3  C  =  normalize(cameraVector);    vec3  N  =  normalize(fragmentNormal);    vec3  L  =  normalize(lightVector);    vec3  H  =  normalize(L  +  C);    float  distF  =  //..    float  df  =  max(0.0,  dot(N,  L));    float  sf  =  max(0.0,  dot(N,  H));        vec3  diffuse    =  dfColor  *  df                        *  distF;    vec3  specular  =  sfColor  *  pow(sf,  16.0)  *  distF;    gl_FragColor  =  vec4(clamp(        M*(diffuse+AMBIENT)  +  specular,0.0,1.0),1); } GLSL
25. getElementById("a").src  =   "data:audio/x-­‐wav,%52%49%46%46%84%...”; <audio  id="a"  autoplay="true"  loop></audio> function  beat(t)  {    return  t*(5186>>(t>>9&14)&15); } HTML & JavaScript
26. PNG = win
27. 4 Experiment
28. shadertoy.com
29. Happy hacking! @akisaarinen http://akisaarinen.fi/devday2013