Reminder
Source : http://codepen.io/rachsmith/
Vertex (Vertices)
Index (Indices)
Not Indexed
- [0, 1, 2]
- [3, 4, 5]
Indexed
- [0, 1, 2]
- [3, 0, 2]
Geometry
Easier to work with as they store attributes such as vertices, faces, colors and so on directly, however they are generally slower.
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -0.5, -0.5, 0 ),
new THREE.Vector3( 0.5, -0.5, 0 ),
new THREE.Vector3( 0, 0.5, 0 )
);
geometry.faces.push(
new THREE.Face3( 0, 1, 2 )
);
BufferGeometry
An efficient alternative to Geometry, because it stores all data within buffers. This reduces the cost of passing all this data to the GPU. This also makes BufferGeometry harder to work with.
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( [
-0.5, -0.5, 0,
0.5, -0.5, 0,
0, 0.5, 0
] );
geometry.addAttribute('position', new THREE.BufferAttribute( vertices, 3 ) );
var indices = new Uint32Array( [
0, 1, 2
] );
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
Practice 1
Shader
Data Types
- Scalars : int, float
- Vectors : vec2, vec3, vec4
- Matrices : mat4
- Samplers: sampler2D
Learn more : http://www.lighthouse3d.com
Swizzling
You can access the components of vectors using the following syntax:
vec4 someVec;
someVec.x + someVec.y;
You can use x, y, z, or w, referring to the first,
second, third, and fourth components, respectively.
vec4 someVec;
someVec.wzyx = vec4(1.0, 2.0, 3.0, 4.0); //Reverses the order.
someVec.zx = vec2(3.0, 5.0); //Sets the 3rd component of someVec to 3.0
// and the 1st component to 5.0
Learn more : https://www.khronos.org)
Functions
// distance
float distance(float p0, float p1)
float distance(vec2 p0, vec2 p1)
float distance(vec3 p0, vec3 p1)
float distance(vec4 p0, vec4 p1)
// dot product
float dot(float x, float y)
float dot(vec2 x, vec2 y)
float dot(vec3 x, vec3 y)
float dot(vec4 x, vec4 y)
And a lot of more !
Learn more : http://www.shaderific.com
Vertex
It must define gl_Position, a 4D float vector,
which is the final position of the vertex on screen
Vertex
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = vec4(position, 1);
}
<\script>
Or
var vertexShader =
"void main() {\n" +
" gl_Position = vec4(position, 1);\n" +
"}";
Fragment
It must set or discard the gl_FragColor variable,
another 4D float vector, which is the final colour of our fragment.
Fragment
<script id="fragmentShader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
<\script>
Or
var fragmentShader =
"void main() {\n" +
" gl_FragColor = vec4(1, 0, 0, 1);\n" +
"}";
Material
var material = new THREE.ShaderMaterial( {
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
Or
var material = new THREE.ShaderMaterial( {
vertexShader: vertexShader,
fragmentShader: fragmentShader
} );
Practice 2
Uniforms
Value sent to both vertex shaders and fragment shaders
and contain values that stay the same across the entire frame being rendered
Uniforms
var material = new THREE.ShaderMaterial( {
uniforms: {
color: { value: new THREE.Color( 0x00ff00 ) }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
void main() {
gl_FragColor = vec4(color, 1);
}
<\script>
Practice 3
Varying
Variables declared in the vertex shader
that we want to share with the fragment shader.
Varying
<script id="vertexShader" type="x-shader/x-vertex">
varying vec4 vColor;
void main() {
gl_Position = vec4(position, 1);
vColor = gl_Position * 0.5 + 0.5;
}
<\script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
<\script>
Varying
Practice 4
Attributes
Values that are applied to individual vertices.
Attributes are only available to the vertex shader.
Attributes
var colors = new Float32Array( indices.length * 3 );
for ( var i = 0, i3 = 0, len = indices.length; i < len; i++, i3 += 3 ) {
colors[ i3 + 0 ] = Math.random();
colors[ i3 + 1 ] = Math.random();
colors[ i3 + 2 ] = Math.random();
}
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 color;
varying vec4 vColor;
void main() {
gl_Position = vec4(position, 1);
vColor = vec4(color, 1.0);
}
<\script>
Practice 5
More
Matrices
How the 3D position of the vertex is actually projected to the final 2D position on the screen.
- Model : How you take your original model data and move it around in 3d world space.
- View : The location of the camera in the scene.
- Projection : The perspective matrix, which mimics the effects of a typical camera.
<script id="vertexShader" type="x-shader/x-vertex">
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
}
<\script>
Learn more : http://www.opengl-tutorial.org
Normals
A unit vector that describes the direction a surface is facing
