Three.js, Part 2
Lighting and materials
Review
In Three.js we have:
- scenes
- cameras
- geometries
- meshes
- materials
- renderers
Lighting
Lighting example
Ambient Lighting
Ambient = background, applies to everything
var light = new THREE.AmbientLight(0xffffff);
scene.add(light); Not meant to be the only light in the scene
Aside: THREE.Color
new THREE.AmbientLight(new THREE.Color(0xffffff)); setHSV, add(color), lerp, etc.
Point light
Light from a single source in all directions
var light = new THREE.PointLight(0xffffff);
light.distance = 100;
light.intensity = 0.8;
light.position = new THREE.Vector3(0, 10, 0); Like a light bulb!
Spot light
A spot light is... a spot light. (cone-shaped)
var light = new THREE.SpotLight(0xffff);
light.position = new THREE.Vector3(0, 10, 0);
light.castShadow = true;
light.target = floor; Most natural representation for a lot of lighting
Aside: shadows
Lighting is for A) color and B) shadows.
Shadows can be expensive to compute, so we have
a lot of properties for dealing with them.
directional light
Parallel rays, like the sun (something far away)
var light = new THREE.DirectionalLight(0xffffff);
light.position = new THREE.Vector3(-40, 60, -10);
light.castShadow = true;
light.shadowCameraNear = 2;
light.shadowCameraFar = 200;
light.shadowCameraLeft = -50;
light.shadowCameraRight = 50;
light.shadowCameraTop = 50;
light.shadowCameraBottom = -50;
light.distance = 0;
light.intensity = 0.5;
light.shadowMapHeight = 1024;
light.shadowMapWidth = 1024;
other lighting
Hemisphere light: for ground reflection
Area lighting: for non-point lighting
Lens flares: lololololol
materials
material basics
All materials share the following properties:
- opacity: 0 to 1, transparency
- side: FrontSide, BackSide, DoubleSide
- and more...
basic material
Static colors
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
new THREE.Mesh(someGeomtery, material); depth material
Changes based on position
new THREE.MeshDepthMaterial(); normal material
Changes based on normal vector
new THREE.MeshNormalMaterial(); FACE MATERIAL
Combine multiple materials
var matArray = [];
matArray.push(new THREE.MeshBasicMaterial( { color: 0x009e60 }));
matArray.push(new THREE.MeshBasicMaterial( { color: 0x0051ba }));
matArray.push(new THREE.MeshBasicMaterial( { color: 0xffd500 }));
matArray.push(new THREE.MeshBasicMaterial( { color: 0xff5800 }));
matArray.push(new THREE.MeshBasicMaterial( { color: 0xC41E3A }));
matArray.push(new THREE.MeshBasicMaterial( { color: 0xffffff }));
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
lighting materials
Lambert: dull (diffuse)
- ambient: combines with natural ambience
- emissive: solid color emitted by object
Phong: shiny (specular)
- specular: what color you shine as
- shininess: how shiny you are
shaders
GLSL: GL Shading Language (almost C)
- vertex shader: defines position of vertices
- fragment shaders: defines color of pixels
Shader looks like:
uniform float time;
void main()
{
vec3 posChanged = position;
posChanged.x = posChanged.x*(abs(sin(time*1.0)));
posChanged.y = posChanged.y*(abs(cos(time*1.0)));
posChanged.z = posChanged.z*(abs(sin(time*1.0)));
gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);
} shaders
precision highp float;
uniform float time;
uniform float alpha;
uniform vec2 resolution;
varying vec2 vUv;
void main2(void)
{
vec2 position = vUv;
float red = 1.0;
float green = 0.25 + sin(time) * 0.25;
float blue = 0.0;
vec3 rgb = vec3(red, green, blue);
vec4 color = vec4(rgb, alpha);
gl_FragColor = color;
}
#define PI 3.14159
#define TWO_PI (PI*2.0)
#define N 68.5
void main(void)
{
vec2 center = (gl_FragCoord.xy);
center.x=-10.12*sin(time/200.0);
center.y=-10.12*cos(time/200.0);
vec2 v = (gl_FragCoord.xy - resolution/20.0) / min(resolution.y,resolution.x) * 15.0;
v.x=v.x-10.0;
v.y=v.y-200.0;
float col = 0.0;
for(float i = 0.0; i < N; i++)
{
float a = i * (TWO_PI/N) * 61.95;
col += cos(TWO_PI*(v.y * cos(a) + v.x * sin(a) + sin(time*0.004)*100.0 ));
}
col /= 5.0;
gl_FragColor = vec4(col*1.0, -col*1.0,-col*4.0, 1.0);
} 98-232: Three.js part 2
By Will Crichton
