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
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
100
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
200
BI ツールはもういらない?Amazon RedShift & MCP Server で試みる新しいデータ分析アプローチ
cdataj
0
120
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
6
1k
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.7k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Optimizing for Happiness
mojombo
379
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Tale of Four Properties
chriscoyier
161
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Agile that works and the tools we love
rasmusluckow
331
21k
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