MARTIN SCHUHFUSS
@usefulthink
m.schuhfuss@gmail.com
hey, we can do this thing in 3D!
let's find a simpler solution :(
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 won't need any more code for this
problem: there are just way too many photons
http://ilchoi.weebly.com/monte-carlo-path-tracing.html
http://docs.chaosgroup.com/display/VRAY2SKETCHUP/Basic+Ray+Tracing
(doesn't hurt, I promise)
https://graphics.stanford.edu/courses/cs348b-00/lectures/lecture12/walk006.html
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.
Materials describe the optical properties of stuff objects are made of and how they interact with light-sources.
The shading-model is the rendering-equation used to compute the fragment-color from material-properties and light-sources.
please feel free to contact me later for chatting or questions...
(I probably ran out of time by now...)