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
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
940
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
衛星運用をソフトウェアエンジニアに依頼したときにできあがるもの
sankichi92
1
1k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
460
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
550
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
524
40k
Docker and Python
trallard
45
3.5k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Done Done
chrislema
184
16k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Agile that works and the tools we love
rasmusluckow
329
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
4 Signs Your Business is Dying
shpigford
184
22k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Side Projects
sachag
455
42k
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