Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to 4k intros (Reaktor Dev Day 2013)

Intro to 4k intros (Reaktor Dev Day 2013)

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

Aki Saarinen

October 04, 2013
Tweet

More Decks by Aki Saarinen

Other Decks in Technology

Transcript

  1. 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
  2. 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)
  3. var  canvas  =  getElementById("c"); var  gl        

     =  canvas.getContext("webgl"); JavaScript
  4. 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
  5. 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
  6. mat3  rx(float  t)  {    return  mat3(      

     1,              0,              0,        0,    cos(t),    -­‐sin(t),        0,    sin(t),      cos(t)    ); } Rotation GLSL
  7. 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