Hi !
Wen
Goodboy Digital
( Pixi.js )
Sketches
!Three.js
WebGL
Vectors, Matrices, Quaternions, Linear Algebra ... Maths basically.
Shaders
Vertex
Fragment
// Vertex Shader
precision highp float;
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
attribute vec3 aNormal;
uniform mat4 uModelMatrix;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
varying vec2 vTextureCoord;
varying vec3 vNormal;
void main(void) {
gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
vNormal = aNormal;
}
Shaders - Vertex Shader
// Fragment Shader
precision highp float;
uniform sampler2D texture;
varying vec2 vTextureCoord;
void main(void) {
gl_FragColor = texture2D(texture, vTextureCoord);
}
Shaders - Fragment Shader
const positions = [
-1, -1, 0, // point 1
1, -1, 0, // point 2
0, 1, 0 // point 3
];
Buffers
Attributes
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, attrObj.dataArray, attrObj.drawType);
const attrPosition = getAttribLoc(gl, mShaderProgram, attrObj.name);
gl.enableVertexAttribArray(attrPosition);
gl.vertexAttribPointer(attrPosition, attrObj.itemSize, gl.FLOAT, false, 0, 0);
Uniforms
Varying
WebGL 2
DevCon
By Yi-Wen Lin
DevCon
- 429