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
A Novice's Guide to WebGL
Search
krzychukula
April 26, 2017
Programming
0
38
A Novice's Guide to WebGL
Introduction to 3D, shaders and WebGL.
krzychukula
April 26, 2017
Tweet
Share
More Decks by krzychukula
See All by krzychukula
Introduction to WebGL
krzychukula
1
100
Simplicity
krzychukula
0
57
Angular the Good Parts
krzychukula
0
230
Yield
krzychukula
0
81
Promises, Promises
krzychukula
5
390
Other Decks in Programming
See All in Programming
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
最近のVS Codeで気になるニュース 2025/01
74th
1
250
Rails アプリ地図考 Flush Cut
makicamel
1
110
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Grafana Cloudとソラカメ
devoc
0
140
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Featured
See All Featured
Speed Design
sergeychernyshev
25
780
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building an army of robots
kneath
302
45k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Transcript
A Novice’s Guide to WebGL @Krzychukula
Plan 1. Intro 2. How it all works 3. Triangle
4. Multiple colours 5. Matrix 6. Learn
ASK QUESTIONS!
None
Data Visualisation
What my learning looked like?
But this is just a hobby
OpenGL books Courses Three.js Shaders Workshop WebGL workshop WebGL Books
Disclaimer: mental models over correctness
Who this talk is for?
[-1 …. 0 …. 1]
NO SHINY DEMOS
None
None
Dreyfus model of skill acquisition
Masters of DOOM YOUme
I realised that we are all Novices!
Novice WebGL Programmer!
Let’s start
2. How it all works?
Back in the old days…
None
Graphic Card
None
Map Reduce?
None
None
What is WebGL?
History
Shaders
Vertex Fragment
Vertex Shader Fragment Shader
It has to be FAST
Vertex Shader void main() { gl_Position = vec4(0.0, 0.0, 0.0,
1.0); }
Vertex Shader attribute vec4 a_Position; void main() { gl_Position =
a_Position; }
Fragment Shader void main() { gl_FragColor = vec4(0.0, 1.0, 0.0,
1.0); }
None
Fragment Shader uniform vec4 a_Color; void main() { gl_FragColor =
a_Color; }
But… What about JS?
Context var gl = canvas.getContext("webgl");
Compile Vertex Shader var vertexShader = gl.createShader(gl.VERTEX_SHADER) gl.shaderSource(vertexShader, ` void
main() { … } `) gl.compileShader(vertexShader)
Compile Fragment Shader var fragShader = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(fragShader, ` void
main() { … } `) gl.compileShader(fragShader)
Program var program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program)
u_Color var u_Color = gl.getUniformLocation(program, ‘u_Color’); gl.uniform4fv(u_Color, [0.0, 1.0, 0.0,
1.0]);
Fragment Shader uniform vec4 u_Color; void main() { gl_FragColor =
u_Color; }
None
None
1 -1 1
None
0, 0.5
-0.5, -0.5 0, 0.5
-0.5, -0.5 0, 0.5 0.5, -0.5
gl_Position = vec4(0.0, 0.5, 0.0, 1.0); -0.5, -0.5 0, 0.5
-0.5, 0.5
gl_Position = vec4(0.0, 0.5, 0.0, 1.0); gl_Position = vec4(-0.5, -0.5,
0.0, 1.0); gl_Position = vec4(0.5, -0.5, 0.0, 1.0); -0.5, -0.5 0, 0.5 -0.5, 0.5
var positions = new Float32Array([ 0.0, 0.5, 0.0, 1.0, -0.5,
-0.5, 0.0, 1.0, 0.5, -0.5, 0.0, 1.0 ]);
Buffers
var buffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
var positions = new Float32Array([ 0.0, 0.5, 0.0, 1.0, -0.5,
-0.5, 0.0, 1.0, 0.5, -0.5, 0.0, 1.0 ]);
var a_Position = gl.getAttribLocation(program, ‘a_Position') gl.enableVertexAttribArray(a_Position) gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false,
0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 3)
None
Vertex Shader Fragment Shaders
None
Fragment Shader attribute vec4 a_Color; void main() { gl_FragColor =
a_Color; }
varying Vertex Shaders Fragment Shaders attributes
Vertex Shader attribute vec4 a_Position; attribute vec4 a_Color; varying vec4
v_Color; void main() { gl_Position = a_Position; v_Color = a_Color; }
Vertex Shader void main(vec4 a_Position, vec4 a_Color) { return {
gl_Position: a_Position, v_Color: a_Color }; }
v_Color = vec4(1.0, 0.0, 0.0, 1.0); v_Color = vec4(0.0, 1.0,
0.0, 1.0); v_Color = vec4(0.0, 0.0, 1.0, 1.0);
What about the middle?
None
None
Fragment Shader varying vec4 v_Color; void main() { gl_FragColor =
v_Color; }
None
var colors = new Float32Array([ 1.0, 0.0, 0.0, 1.0, 0.0,
1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]);
var buffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
var a_Color = gl.getAttribLocation(program, ‘a_Color') gl.enableVertexAttribArray(a_Color) gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false,
0, 0)
gl.drawArrays(gl.TRIANGLES, 0, 3)
None
Almost the end
Matrix
diffX diffX rotateAngle scaleX scaleY
Matrix
Don’t worry about Math Linear Algebra
var modelMatrix = new Matrix4() modelMatrix.translate(x, 0, 0, 1) modelMatrix.rotate(angle,
0, 0, 1) In JavaScript
Vertex Shader attribute vec4 a_Position; uniform mat4 u_modelMatrix; void main()
{ gl_Position = u_modelMatrix * a_Position; }
What to learn from?
WebGL Beginner’s Guide Diego Cantor & Brandon Jones
Interactive 3D Graphics Eric Haines & Gundega Dekena
WebGL Programming Guide Kouichi Matsuda & Rodger Lea
The End @Krzychukula
https:/ /hacks.mozilla.org/2017 /01/webgl-2-lands-in-firefox/ https:/ /www.chromeexperiments.com/globe https:/ /codepen.io/krzychukula/pen/qmZaMz?editors=0010 Triangle https:/ /codepen.io/krzychukula/pen/OmXgKe?editors=0010
Triangle 3 colors https:/ /codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors in one buffer https:/ /www.packtpub.com/game-development/webgl-beginners-guide https:/ /www.udacity.com/course/interactive-3d-graphics--cs291 https:/ /sites.google.com/site/webglbook/
QA (ideas) Libraries? How shadertoy works? How to use one
buffer for vertex and colors data? How textures work? How many lines of code those examples have?