Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro to 4k intros (Reaktor Dev Day 2013)
Search
Aki Saarinen
October 04, 2013
Technology
0
350
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
Share
More Decks by Aki Saarinen
See All by Aki Saarinen
TDCSF14: Developing fast and efficient Tizen HTML5 mobile applications: Lessons Learned
akisaarinen
1
190
Fast and Efficient Tizen HTML5 mobile apps (Tizen Developer Summit Korea 2013)
akisaarinen
1
1.5k
Opinionated Scala (Reaktor Dev Day 2012)
akisaarinen
2
750
Other Decks in Technology
See All in Technology
モダンな現場と従来型の組織——そこに生じる "不整合" を解消してこそチームがパフォーマンスを発揮できる / Team-oriented Organization Design 20250825
mtx2s
6
650
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
150
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
帳票Vibe Coding
terurou
0
140
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
720
Webアクセシビリティ入門
recruitengineers
PRO
2
480
.NET開発者のためのAzureの概要
tomokusaba
0
230
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.7k
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
TypeScript入門
recruitengineers
PRO
26
7.9k
Goでマークダウンの独自記法を実装する
lag129
0
220
トヨタ生産方式(TPS)入門
recruitengineers
PRO
4
470
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Visualization
eitanlees
147
16k
Facilitating Awesome Meetings
lara
55
6.5k
Optimizing for Happiness
mojombo
379
70k
Thoughts on Productivity
jonyablonski
69
4.8k
Scaling GitHub
holman
462
140k
Practical Orchestrator
shlominoach
190
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Transcript
Intro to 4K intros @akisaarinen http://akisaarinen.fi/devday2013/
None
This is what you GET
WebGL and shaders? Spinning the cubes Lights and Music How
to experiment? 1 2 3 4
WebGL Shaders 1 and
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
Vertices
Triangle surfaces
Surface normals
VERTEX STREAM Vertex Shader Fragment (Pixel) Shader PIXELS = cubes
= pos+camera = lights = result
Vertex Shader Translation Rotation Scaling ...
Fragment Shader Lights Shadows Reflections ...
Fragment Shader is THE SHIT
What did cube4k eat? 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)
cube4k.html
var canvas = getElementById("c"); var gl
= canvas.getContext("webgl"); JavaScript
var program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); JavaScript
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
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
mat3 rx(float t) { return mat3(
1, 0, 0, 0, cos(t), -‐sin(t), 0, sin(t), cos(t) ); } Rotation GLSL
LIGHTS and MUSIC 3
Lighting N H C L Surface
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
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
PNG = win
4 Experiment
shadertoy.com
Happy hacking! @akisaarinen http://akisaarinen.fi/devday2013