full-stack software engineer
member of kottans.org
*Human's FOV is 190 degrees
Operations with matrices
2D, 2.5D vs 3D
Back to history
Tools & Technologies
- OpenGL is specification created by Kurt Akeley and Mark Segal (current version is OpenGL 4.6);
- Reviewed by ARB (Architecture Review Board) from 1992;
- Windows, Unix, MacOS, PlayStation are released specification.
- Common API (cross-platform), open standard, well specified and documented;
- Hide differences of hardware by programming simulation;
- 25 years of compatibility (!!!).
OpenGL language bindings
OpenGL shaders (GLSL)
Example of fragment shader (red fragment):
- Use GPU;
- Vertex, geometry, fragment shaders;
- C syntax.
Canvas (HTML5) + OpenGL ES = WebGL.
WebGL evolved out of the Canvas 3D experiments started by Vladimir Vukićević at Mozilla. Vukićević first demonstrated a Canvas 3D prototype in 2006. By the end of 2007, both Mozilla and Opera had made their own separate implementations.
In 2011 it was criticised by Microsoft. Development of the WebGL 2 specification started in 2013. This specification is based on OpenGL ES 3.0.
Not always you need WebGL
...and a lot of examples on threejs.org
Generic terms in Three.js
- 'npm install three' or 'yarn add three'
- add <script src="js/three.min.js">/script>
Scene, renderer, camera
Renderers: WebGLRenderer is a standard, CanvasRenderer is become obsolete (not recommend)
Cameras: OrthographicCamera, PerspectiveCamera, StereoCamera, CubeCamera
Meshes & Geometry
Geometry = vertices + faces
Types: inbuilt (defined in Three.js), custom (you could create your own geometry), exported (from some format)
Geometry (inbuilt): BoxGeometry, CircleGeometry, ConeGeometry, CylinderGeometry, PlaneGeometry, RingGeometry, TorusGeometry, TorusKnotGeometry etc.
Manipulating with meshes (union, subtract etc.): csg.js
Meshes & Geometry
Base class for meshes is THREE.Object3D, so everything could be translated/rotated and scaled.
Most important properties: id, uuid, name, position/rotation/scale, userData, parent/children
Most important methods: getObjectByName, getObjectById
Set position/rotation/scale (under the hood it's multiply to matrix):
Animations with matrices
Loaders: JSONLoader, TextureLoader, ObjectLoader, STLLoader (3D printing), CTMLoader (OpenCTM) etc.
Note! Also you can export your mesh from the scene (using THREE.SceneExporter).
Materials: MeshLambertMaterial, MeshBasicMaterial, MeshPhongMaterial etc.
MeshLambertMaterial -> non-shiny surface
MeshPhongMaterial -> shiny metallic-like surface
Note! Each material is reacted to specific light.
Lights: AmbientLight, DirectionalLight, PointLight, SpotLight etc.
AmbientLight -> affects all objects equality
PointLight -> light that shines in all directions (affects only MeshLambert & MeshPhong materials)
DirectionalLight -> sunlight, all lights come from some direction
SpotLight -> can cast shadow in one direction (like projector, affects only MeshLambert & MeshPhong materials)
Second way (better):
You could define different modes and filters for your textures.
Where we use Three.js
- Cross-browser JS library
- No need to install proprietary plugins
- Open-source, hosted on GitHub
- Easy API
- Good support (reacting on issues)
- Backward compatibility
- More advanced things are not clear from examples/docs
- Graphical editor is not ready
- Update Three.js often
- No backward compatibility sometimes is painful
- Read migration guide while upgrade Three.js, follow recommendations, really
- Everything is okay with all browsers, some issues with Safari and Safari on iPad
- Non-trivial things are hard to google, 'learning by doing' approach
- Sometimes errors are not self-described
- Use additional plugins with Three.js (e.g. TrackballControls, OrbitControls, VRControls, Stats)
- Use helpers while developing (AxisHelper, CameraHelper etc.)
- Support of Leap Motion, WebVR, Google Cardboard
- We tried integrate Leap Motion in our software (POC), it was really cool experience
No books, threejs.org is the best resource for learning (IMO)
Thanks! Lunch time ;)
Three.js, Back to the Future
By Julia Savinkova