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
180
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
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
150
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
160
Agentic Workflowという選択肢を考える
tkikuchi1002
1
390
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
0
160
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
120
生成AIでwebアプリケーションを作ってみた
tajimon
2
130
CI/CDとタスク共有で加速するVibe Coding
tnbe21
0
230
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
190
本部長の代わりに提案書レビュー! KDDI営業が毎日使うAIエージェント「A-BOSS」開発秘話
minorun365
PRO
14
2.3k
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
730
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
9.5k
OpenHands🤲にContributeしてみた
kotauchisunsun
0
210
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Docker and Python
trallard
44
3.4k
Code Review Best Practice
trishagee
68
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Code Reviewing Like a Champion
maltzj
524
40k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Documentation Writing (for coders)
carmenintech
71
4.9k
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