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
740
Other Decks in Technology
See All in Technology
ビギナーであり続ける/beginning
ikuodanaka
3
680
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
AI導入の理想と現実~コストと浸透〜
oprstchn
0
180
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
130
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
360
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
490
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
180
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
13k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Code Review Best Practice
trishagee
69
18k
Gamification - CAS2011
davidbonilla
81
5.3k
What's in a price? How to price your products and services
michaelherold
246
12k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Thoughts on Productivity
jonyablonski
69
4.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A designer walks into a library…
pauljervisheath
207
24k
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