Martin Schuhfuss | @usefulthink | m.schuhfuss@gmail.com
const container = document.querySelector('.container');
const canvas = document.createElement('canvas');
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
container.appendChild(canvas);
const gl = canvas.getContext('webgl');
// ---- setup viewport size
gl.viewport(0, 0, canvas.width, canvas.height);
// ---- clear screen with black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// ---- create and compile shaders
const vs = gl.createShader(gl.VERTEX_SHADER);
const fs = gl.createShader(gl.FRAGMENT_SHADER);
// ---- upload and compile GLSL shaders
gl.shaderSource(vs, `
attribute vec3 position;
void main() { gl_Position = vec4(position, 1.0); }
`);
gl.shaderSource(fs, `
void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }
`);
gl.compileShader(vs);
gl.compileShader(fs);
// [... getContext, init viewport and clear]
// [... create and compile shaders]
// ---- link a program out of the two shaders
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vs);
gl.attachShader(shaderProgram, fs);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// ---- create a buffer with vertex-data
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
const vertices = new Float32Array([
-1.0, 0.0, 0.0,
1.0, 0.0, 0.0,
0.0, 1.0, 0.0
]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// ---- bind the buffer to the vertex-shader attribute
const positionAttr = gl.getAttribLocation(shaderProgram, "position");
gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);
// ---- draw it. finally.
gl.drawArrays(gl.TRIANGLES, 0, vertices.length);
I think there's a better way to explain 3D rendering
...and we don't really need any code for this
[...] I’ll start with the surface of the topic and ask myself what I don’t fully get — I look for those foggy spots in the story where when someone mentions it or it comes up in an article I’m reading, my mind kind of glazes over with a combination of
“ugh it’s that icky term again nah go away” and
“ew the adults are saying that adult thing again and I’m seven so I don’t actually understand what they’re talking about.”
Then I’ll get reading about those foggy spots — but as I clear away fog from the surface, I often find more fog underneath. So then I research that new fog, and again, often come across other fog even further down.
Tim Urban
problem: there are just way too many photons
Disney's practical guide to path tracing
"A realistic simulation of how light behaves in an environment"
http://www.3dmax-tutorials.com/Radiosity_Solution.html https://de.wikibooks.org/wiki/Blender_Dokumentation:_Radiosity_als_Modellierungswerkzeug
see http://www.cise.ufl.edu/~s11022et/ for more information.
(doesn't hurt, I promise)
or, "why are there 4 dimensional coordinates everywhere?"
* most 3D environments like DirectX or OpenGL also allow quads as primitives
primitive assembly
rasterization
color-blending
The vertex-shader is run on the GPU for each and every vertex, without any information about other vertices.
* there are other rendering-modes like triangle-strips and fans, but those are ignored here
The fragment-shader is run on the GPU once for every fragment of every triangle, and outputs a color-value for the fragment.
There's somebody talking about Elm as I write this, I guess this needs to be in another Talk.
please feel free to contact me later for chatting or questions...