Category: GL

MEMORYY, INSTRUCTION PROCESSING -> CPU
ALGORITHM PROCESSING -> GPU

vertextShader: [
	"uniform vec3 uMaterialColor;",
	"uniform vec3 uDirLight;",

	"varying vec3 vColor;",

	"void main(){",
	"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0);",
	"vec3 light = normalize( uDirLight );",

	"float diffuse = max( dot( normal, light), 0.0);",
	"vColor = uMaterialColor * diffuse;",
	"}"
].join("\n"),

uniform vec3 uMaterialColor;
uniform vec3 uDirLight;

varying vec3 vColor;

void main(){
	gl_Position = projectionMath * modelViewMatrix * vec4(position * 1.0);
	vec3 light = normalize( uDirLight );

	float diffuse = max( dot(normal, light), 0.0);
	vColor = uMaterialColor * diffuse;
}

var geo = new THREE.Geometry();

geo.vertices.push( new THREE.Vector3(0.0, 0.0, 0.0));
geo.vertices.push( new THREE.Vector3(4.0, 0.0, 0.0));
geo.vertices.push( new THREE.Vector3(4.0, 4.0, 0.0));

var uvs = [];
uvs.push( new THREE.Vector2( 0.0, 0.0 ));
uvs.push( new THREE.Vector2( 1.0, 0.0 ));
uvs.push( new THREE.Vector2( 1.0, 1.0 ));

geo.faces.push( new THREE.Face3(0, 1, 2));
geo.faceVertexUvs[ 0 ].push([ uvs[0], uvs[1], uvs[2]]);

var texture = new THREE.Texture();
texture.magFilter = THREE.NearestFilter;
texture.magFilter = THREE.LinearFilter;

texture.minFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;

texture.anisotropy = 1;
texture.anisotropy = renderer.getMaxAnisotropy();

var disk = THREE.ImageUnits.loadTexture("textures/disc.png");
var material = new THREE.ParticleBasicMaterial(
	{ size: 35, sizeAttenuation: false, map: disk, tranparent: true});
material.color.setHSL( 0.9, 0.2, 0.6 );

var particles = new THREE.ParticleSystem( geometry, material );
particles.sortParticles = true;
scene.add( particles );

var geometry = new THREE.Geometry();
for ( var i = 0; i < 8000; i ++){
	var vertex = new THREE.Vector3();
	do {
	vertex.x = 2000 * Math.random() - 1000;
	vertex.y = 2000 * Math.random() - 1000;
	vertex.z = 2000 * Math.random() - 1000;
	} while ( vertex.length() > 1000 );
	geometry.vertices.push( vertex );
}

for ( var x = -1000; x <= 1000; x+= 100){
	for ( var y = -1000; y <= 1000; y+= 100){
		for(var z = -1000; z <= 1000; z+= 100){
			var vertex = new THREE.Vector3(x, y, z);
			geometry.vertices.push( vertex );
		}
	}
}

var uvs = [];
uvs.push( new THREE.Vector2(0.75, 0.25));
uvs.push( new THREE.Vector2(1.0, 0.25));
uvs.push( new THREE.Vector2(1.0, 0.5));
uvs.push( new THREE.Vector2(0.75, 0.5));

var texture = THREE.ImageUtils.loadTexture(
	'textures/grass512x512.jpg');
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
var solidGround = new THREE.Mesh(
	new THREE.PlaneGeometry(10000, 10000, 100, 100),
	new THREE.MeshLambertMaterial( { map: texture }));

var texture = THREE.ImageUtils.loadTexture('/media/img/cs291/textures/water.jpg');
var material = new THREE.MeshPhongMaterial({ shininess: 50});
material.specularMap = texture;

var teapotMaterial = new THREE.MeshPhongMaterial(
	{ color: 0x770000, specular:0xffaaaa,
	envMap: textureCube });

fishereye, perspective, photograph

viewSize = 900;
aspectRatio = canvasWidth/canvasHeight;
camera = new THREE.OrthographicCamera(
	-aspectRatio*viewSize/ 2, aspectRatio*viewSize/2,
	viewSize / 2, -viewSize / 2,
	-1000, 1000);

camera.position.set( -890, 600, -480 );
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(0, 310, 0);

cameraControls.target.set(-2800, 360, -1600);

camera = new THREE.PerspectiveCamera( 30, aspectRAtio, 1, 10000);
camera.position.set( -170, 170, 40);
cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
cameraControls.target.set(00, 50, 0);

effectController = {
	fov: 40
};
var gui = new dat.GUI();
var element = gui.add( effectController, "fov", 1.0, 179.0 );
element.name("field of view");

function render(){
	var delta = clock.getDelta();
	cameraControls.update(delta);

	camera.fov = effectController.fov;
	camera.updateProjectionMatrix();
	renderer.render(scene, camera);
}

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setViewport(
	0.25 * canvasWidth, 0,
	0.5 * canvasWidth, 0.5 * canvasHeight );

frontCam = new THREE.OrthographicCamera(
	-aspectRatio*viewSize / 2, aspectRatio*viewSize / 2,
	viewSize / 2, -viewSize / 2,
	-1000, 1000);
frontCam.up.set( 0, 1, 0);
sideCam = new THREE.OrthographicCamera(
	-aspectRatio*viewSize / 2, aspectRatio*viewSize,
	viewSize / 2, -viewSize / 2,
	-1000, 1000);
sideCam.up.set( 0, 1, 0);

frontCam.position.copy( cameraControls.target);
frontCam.position.x -= 1;
frontCam.lookAt( cameraControls.target );
renderer.setViewport(0, 0.5*canvasHeight, 0.5*canvasWidth, 0.5*canvasHeight);
renderer.render( scene, frontCam );

sideCam.position.copy( cameraControls.target);
sideCam.position.z += 1;
sideCam.lookAt(cameraControls.target);
renderer.setViewport(0.5*canvasWidth, 0.5*canvasWidth, 0.5*canvasHeight);
renderer.render( scene, sideCam );

rearCam.position.copy(camera.position);
rearTarget.copy(camera.position);
rearTarget.sub(cameraControls.target);
rearTarget.add(camera.position);
rearCam.lookAt(rearTarget);

intensity 0 – 1

set directional light

var light = new THREE.DirectionalLight( 0xFFFAAD, 0.7 );
light.position.set( 200, 500, 600 );
scene.add( light);

lignt.position.set( 2, 5, 6);
light.position.set( 0.02, 0.05, 0.06 );

scene.add( new THREE.AmbientLight( 0x222222));

var someMaterial = new THREE.MeshLamberMaterial( );
someMaterial.color.setRGB(0.8, 0.2, 0.1);
someMaterial.ambient.copy( someMaterial.color );

function render(){
	var delta = clock.getDelta();
	cameraControls.update(delta);

	render.render(scene, camera);
}

headlight = new THREE.PointLight( 0xFFFFFF, 1.0 );
scene.add( headlight );

color: full white
intensity: 1.5
location: -400, 1200, 300
angle: 20 degrees
exponent: 1
target position: 0, 200, 0

var light = new THREE.SpotLight( 0xFFFFFF, 1.0 );
light.position.set( -400, 1200, 300);
light.angle = 20 * Math.PI / 180;
light.exponent = 1;
light.target.position.set(0, 200, 0);
scene.add(light);

shadow in three.js

renderer.shadowMapEnabled = true;

spotlight.castShadow = true;
cube.castShadow = true;
cube.receiveShadow = true;

bbird.traverse( function (object){
	object.castShadow = ture;
	object.receiveShadow = true;
	});

light.position.x = Math.cos(
	effectController.angle * Math.PI/180.0 );
light.position.z = Math.sin(
	effectController.angle * Math.PI/180.0 );

light.position.y = Math.sin(effectController.altitude * Math.PI/180.0);

var length = Math.sqrt(1 - light.position.y*light.position.y);
light.position.x = length * Math.cos( effectController.azimuth * Math.PI/180.0);
light.position.z = length * Math.sin( effectController.azimuth * Math.PI/180.0);

body = new THREE.Object3D();
var bodyLength = 60;

createRobotBody( body, bodyLength, robotBodyMaterial );

arm.position.y = bodyLength;
body.add( arm );

scene.add( body );

handRight = new THREE.Object3D();
createRobotGrabber( handRight, handLength, robotHandRightMaterial );
handRight.position.y = faLength;
forearm.add( handRight );

handRight.rotation.z = effectController.hz * Math.PI/180;
handRight.position.z = -effectController.htz;

var flower = new THREE.Object3D();

for (var i = 0; i < 24; i++ )
{
	var cylinder = new THREE.Mesh( cylGeom, petalMaterial );
	cylinder.position.y = petalLength / 2;

	var petal = new THREE.Object3D();
	petal.add( cylinder );
	petal.rotation.z = 90 * Math.PI/180;
	petal.rotation.y = 15*i * Math.PI/180;
	petal.position.y = flowerHeight;

	flower.add( petal );
}

var maxCorner = new THREE.Vector3( 1, 1, 1);
var minCorner = new THREE.Vector3( -1, -1, -1 );
var cylAxis = new THREE.Vector3();
cylAxis.subVectors( maxCorner, minCorner );
var cylLength = cylAxis.length();

cylAxis.normalize();
var theta = Math.acos(
	cylAxis.dot( new THREE.Vector3(0,1,0)));

var cylinder = new THREE.Mesh(
	new THREE.CylinderGeometry(0.2, 0.2, cylLength, 32), cylinderMaterial );

var rotationAxis = new THREE.Vector3(1,0,-1);
rotationAxis.normalize();
cylinder.matrixAutoUpdate = false;
cylinder.matrix.makeRotationAxis( rotationAxis, theta);

var cylinder = new THREE.Mesh(
	new THREE.CylinderGeometry(0.2, 0.2, cylLength, 32), cylinderMaterial );
for ( var i = 0; i < 4; i++ )
{
	var cylinder = new THREE.Mesh( cylinderGeo, cylinderMaterial );

	var x = (i < 2) ? -1: 1;
	var z = (i % 2) ? -1: 1;
	var rotationAxis = new THREE.Vector3(x,0,z);
	rotationAxis.normalize();

	cylinder.matrixAutoUpdate = false;
	cylinder.matrix.makeRotationAxis( rotationAxis, theta );

	scene.add( cylinder ); 
}

var cylAxis = new THREE.Vector3();
cylAxis.subVectors( top, bottom );
var length = cylAxis.length();

var center = new THREE.Vector3();
center.addVectors( top, bottom );
center.divideScalar( 2.0 );

var capsule = new THREE.Object3D();
capsule.add( cyl );
if(!openTop || !openBottom ){
	var sphGeom = new THREE.SphereGeometry(radius, segmentsWidth, segmentsWidth/2);
	if ( !openTop){
		var sphTop = new THREE.MESH( sphGeom, material);
		sphTop.position.set( top.x, top.y, top.z );
		capsule.add( sphTop );
	}
	if ( !openBottom ){
		var sphBottom = new THREE.Mesh( sphGeom, material );
		sphBottom.position.set( bottom.x, bottom.y, bottom.z );
		capsule.add( sphBottom );
	}
}
return capsule;

var helix = new THREE.Object3D();
var bottom = new THREE.Vector3();
var top = new THREE.Vector3();
var openBottom = false;
var openTop = false;
var sine_sign = false;
bottom.set( radius, -height/2, 0);
for (var i = 1; i <= arc*radicalSegment ; i++ ) { top.set(radius * Math.cos( i * 2 * Math.PI/ radialSegments ), height * (i / (arc*radialSegments)) - height/2, sine_sign * radius * Math.sin(i * 2*Math.PI/ radialSegments)); var capsule = createCapsule(material, tube, top, bottom, tubularSegments, OpenTop, openBottom ); helix.add ( capsule ); openBottom = true; bottom.copy( top ); } return helix; [/javascript]

cylinder = new THREE.Mesh(
	new THREE.CylinderGeometry(5, 5, 200, 32), crossbarMaterial);
	cylinder.position.set(0, 360, 0);
	cylinder.rotation.x = 90 * Math.PI / 180.0;
	scene.add( cylinder );

cylinder = new THREE.Mesh(
	new THREE.CylinderGeometry(6, 14, 70, 32), headMaterial);
cylinder.position.set( -70, 530, 0);
cylinder.rotation.z = 90 * Math.PI / 180.0;
scene.add( cylinder );

var color1 = new THREE.Color( 0xF08000);
var color2 = new THREE.Color( 0x808000);
var color3 = new THREE.Color( 0x0982FF);

geometry.faces[0].vertexColors = [ color1, color2, color3 ];

var glassMaterial = new THREE.MeshPhongMaterial({ color: 0x0, specular: 0xFFFFFF,
    shininess: 100, opacity: 0.3, transparent: true});

cube.rotation.y = -60 * Math.PI/180;
scene.add( cube );

Pi is a number – approximately 3.142. It is the circumference of any circle divided by its diameter. The number Pi, denoted by the Greek letter π – pronounced ‘pie’, is one of the most common constants in all of mathematics. It is the circumference of any circle, divided by its diameter.

plane.rotation.x = 20 * Math.PI / 180;
plane.rotation.y = -12 * Math.PI / 180;
plane.rotation.z = 71 * Math.PI / 180;

The Euler angles are three angles introduced by Leonhard Euler to describe the orientation of a rigid body with respect to a fixed coordinate system. They can also represent the orientation of a mobile frame of reference in physics or the orientation of a general basis in 3-dimensional linear algebra.

sphere.scale.x = 3.0;
sphere.scale.y = 0.2;
sphere.scale.z = 0.2;
sphere.rotation.y = 30 * Math.PI/180;

scene.add( sphere );

box.position.x = 3.0;
box.rotation.y = 5.7;
cylinder.position.y = 50;
cylinder.rotation.x = 90 : Math.PI/180;

var block = new THREE.Mesh(
	new THREE.CubeGeometry(1000, 4, 4), clockHandMaterial );

block.position.x = 40;

var clockHand = new THREE.Object3D();
clockHand.add( block );

clockHand.rotation.y = -70 * Math.PI/180;
scene.add( clockHand );

var minuteHand = new THREE.object3D();
minuteHand.add( cube );

minuteHand.rotation.y = -60 * Math.PI/180;
scene.add( minuteHand );

var shpere = new THREE.Mesh(
	new THREE.SphereGeometry(0.5, 32, 16), hourHandMaterial );
sphere.position.y = 18;

sphere.scale.x = 50;
sphere.scale.y = 4;
sphere.scale.z = 4;
sphere.position.x = 50/2 - 10;

var hourHand = new THREE.Object3D();
hourHand.add( sphere );

hourHand.rotation.y = 30 * Math.PI/180;
scene.add( hourHand);

var lamp = new THREE.Object3D();
var cylinderGeometry = new THREE.CylinderGeometry( 20, 20, 100, 32 );
for ( i = 0; i < 10; i++ )
{
	var clinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
	cylinder.rotation.x = 20 * i * Math.PI/180;
	lamp.add( cylinder );
}

forearm = new THREE.Object3D();
var faLength = 80;
createRobotExtender( forearm, faLength, robotForearmMaterial );
scene.add( forearm );

// defining geometry
var triangleGeometry = new THREE.geometry();
// verticles
triangleGeometry.verticle.push( new THREE.Vector3( 1, 1, 0 ));
triangleGeometry.verticle.push( new THREE.Vector3( 3, 1, 0 ));
triangleGeometry.verticle.push( new THREE.Vector3( 3, 3, 0 ));
// face
triangleGeometry.faces.push( new THREE.Face3( 0, 1, 2) );

var x = radius * Math.cos(angle) + location.x;
var y = radius * Math.sin(angle) + location.y;

var sphereMaterial = new THREE.MeshLamberMaterial();

sphereMaterial.color.r = 1.0;
sphereMaterial.color.g = 1.0;
sphereMaterial.color.b = 0.5;

GL stand for graphic library
https://get.webgl.org/

FPS frame rate per second
Motion blur is the apparent streaking of rapidly moving objects in a still image or a sequence of images such as a movie or animation.

three.js
https://threejs.org/examples/

VideoGames
30 or 60 FPS
Monitors: 60 Hertz
FILM: 24FPS, 48 or 72Hz

fpsとは、画像を1秒間に何回書き換えているか表したもの

var camera, scene, renderer;
var windowScale;
var cameraControls;
var clock = new THREE.Clock();

function drawGoldCube() {

    var cube;
    var cubeSizeLength = 100;
    var goldColor = "#FFDF00";
    var showFrame = true;
    var wireMaterial = new THREE.MeshBasicMaterial( { color: goldColor, wireframe: showFrame } ) ;

    var cubeGeometry = new THREE.CubeGeometry(cubeSizeLength, cubeSizeLength, cubeSizeLength);

    cube = new THREE.Mesh( cubeGeometry, wireMaterial );
    cube.position.x = 0;    // centered at origin
    cube.position.y = 0;    // centered at origin
    cube.position.z = 0;    // centered at origin
    scene.add( cube ;

}

function init() {
    var canvasWidth = 846;
    var canvasHeight = 494;
    // For grading the window is fixed in size; here's general code:
    //var canvasWidth = window.innerWidth;
    //var canvasHeight = window.innerHeight;
    var canvasRatio = canvasWidth / canvasHeight;
    // SCENE
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog( 0x808080, 2000, 4000 );
    // LIGHTS
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    // RENDERER
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
    renderer.setSize(canvasWidth, canvasHeight);
    renderer.setClearColor( scene.fog.color, 1 );

    var container = document.getElementById('container');
    container.appendChild( renderer.domElement );


    // CAMERA
    camera = new THREE.PerspectiveCamera( 45, canvasRatio, 1, 4000 );
    camera.position.set( -200, 200, -150 );
    // CONTROLS
    cameraControls = new THREE.OrbitAndPanControls(camera, renderer.domElement);
    cameraControls.target.set(0,0,0);

    / draw the coordinate grid
    Coordinates.drawGrid({size:1000,scale:0.01});
    Coordinates.drawGrid({size:1000,scale:0.01, orientation:"y"});
    Coordinates.drawGrid({size:1000,scale:0.01, orientation:"z"});
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var delta = clock.getDelta();
    cameraControls.update(delta);
    renderer.render(scene, camera);
}

init();
drawGoldCube();
animate();