140716 : 同業前端聚會分享 - webgl 與 three.js
DESCRIPTION
Webgl 與 Three.js 介紹、個人學習經驗TRANSCRIPT
WebGL And Three.jsEIA - 2014 / 07 / 16
These slides are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
About
WIKIWebGL是一項利用JavaScript API呈現3D電腦圖形的技術,有別於過往需加裝瀏覽器外掛程式,透過WebGL的技術,只需要編寫網頁代碼即可實現3D圖像的展示。WebGL的規格尚在發展中,由非營利的Khronos Group管理。
WebGL基於OpenGL ES 2.0,提供了3D影像的程式介面。它使用HTML5 Canvas並允許利用文件物件模型介面。可利用部分Javascript實作自動記憶體管理。
http://zh.wikipedia.org/wiki/WebGLhttp://en.wikipedia.org/wiki/WebGL
WebGL APIWebGL™ is an immediate mode 3D rendering API designed for the web. It is derived from OpenGL® ES 2.0, and provides similar
rendering functionality, but in an HTML context. WebGL is designed as a rendering context for the HTML Canvas element. The
HTML Canvas provides a destination for programmatic rendering in web pages, and allows for performing that rendering using
different rendering APIs. The only such interface described as part of the Canvas specification is the 2D canvas rendering context,
CanvasRenderingContext2D. This document describes another such interface, WebGLRenderingContext, which presents the
WebGL API.
The immediate mode nature of the API is a divergence from most web APIs. Given the many use cases of 3D graphics, WebGL
chooses the approach of providing flexible primitives that can be applied to any use case. Libraries can provide an API on top of
WebGL that is more tailored to specific areas, thus adding a convenience layer to WebGL that can accelerate and simplify
development. However, because of its OpenGL ES 2.0 heritage, it should be straightforward for developers familiar with modern
desktop OpenGL or OpenGL ES 2.0 development to transition to WebGL development.
http://www.khronos.org/registry/webgl/specs/latest/1.0/
Browser Support
caniuse - 14 / 06 / 06
http://caniuse.com/#feat=webgl
Parent feature: Canvas (basic support)
http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
IE11
fps: 13Chrome
fps: 59
IE8 IE11 http://onemillionreasons.audi.de/
Chrome
WebGL in Safari
Apple WWDC 2014
http://learningwebgl.com/blog/?p=6368
Mobile : THREE.CanvasRenderer();
Sony Z1 (2013)HTC Desire HD (2010)
iPhone 4 (2010)
Frameworks
http://www.khronos.org/webgl/wiki/User_Contributions
Debug
Debug
WebGL Inspector
http://www.khronos.org/webgl/wiki/Debugginghttp://benvanik.github.io/WebGL-Inspector/
The popup is extensive and first shows a mesh of the element drawn that can be zoomed inand out with the mouse wheel and rotated while holding down a mouse button.
BeginningWebGL for HTML5
Three.JS
20 Impressive Examples for Learning WebGL with Three.js
http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
Coding
scene = new THREE.Scene();scene.fog = new THREE.FogExp2( 0xDDDDDD, 0.00001);
renderer = new THREE.WebGLRenderer({antialias:true});renderer.setClearColor(scene.fog.color,1);renderer.setSize( window.innerWidth, window.innerHeight );
var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";var map = THREE.ImageUtils.loadTexture(mapUrl);// Now, create a Phong material to show shading; pass in the mapvar material = new THREE.MeshPhongMaterial({ map: map });// Create the cube geometryvar geometry = new THREE.CubeGeometry(1, 1, 1);// And put the geometry and material together into a meshcube = new THREE.Mesh(geometry, material);// Turn it toward the scene, or we won't see the cube shape!cube.rotation.x = Math.PI / 5;cube.rotation.y = Math.PI / 5;// Add the cube to our scenescene.add( cube );
Away3d 4.x ?
1. Renderer > webgl vs canvas (performance)
> CSS3DRenderer, SoftwareRenderer
2. Geometry3. Material4. Camera5. 3d Model6. Interactive7. Particles
My ThreeJS Learning Experience
RendererWebGL / CANVAS
http://threejs.org/examples/#canvas_interactive_cubeshttp://threejs.org/examples/#webgl_interactive_cubes
canvas webgl
http://threejs.org/examples/#css3d_molecules
CSS3DRenderer
renderer = new THREE.WebGLRenderer( { antialias: true } );renderer = new THREE.CanvasRenderer();
** THREE.Particle(material); // CanvasRenderer** THREE.ParticleSystem(geom, material); // WebGLRenderer
Geometry
http://threejs.org/examples/#webgl_geometries
http://threejs.org/examples/#webgl_geometry_nurbs
http://threejs.org/examples/#canvas_geometry_terrain
http://threejs.org/examples/#canvas_geometry_birds
VertexNormals();
http://threejs.org/examples/#webgl_morphnormals
http://threejs.org/examples/#webgl_geometry_normals
Materials
http://threejs.org/examples/#canvas_materials
http://threejs.org/examples/#canvas_materials_depth
THREE.MeshDepthMaterial
Dynamic Textures
http://threejs.org/examples/#canvas_materials_videohttps://github.com/tparisi/WebGLBook/blob/master/Chapter%206/integration-canvas.html
http://threejs.org/examples/#webgl_materials_lightmap
ShaderMaterial
Camera
Orthographic | Perspective
https://github.com/josdirksen/learning-threejshttps://github.com/josdirksen/learning-threejs/blob/master/chapter-02/07-both-cameras.html
3d Model
https://github.com/tparisi/WebGLBook/blob/master/Chapter%204/keyframe-robot.html
No keyframes in 3D model
.dae .js
.dae
http://stackoverflow.com/questions/110426/how-to-serve-files-from-iis-6-on-windows-server-2003
cache!
Particles
http://threejs.org/examples/#canvas_particles_sprites
Sprites
http://threejs.org/examples/#webgl_particles_shapes
Sparks
http://threejs.org/examples/#webgl_particles_shapes
- addInitializer();- addAction();
Spark.jshttps://github.com/zz85/sparks.js
Spark.js
MIT license
Spark.js
Interaction
InteractionWebGL is only a drawing system and, as such, has no built-in support for hit detection. You need to build that yourself. Thankfully, Three.js gives us the support we need so that we can tell when the mouse is over an object.
WebGL: Up and Running
Books
BeginningWebGL for HTML5https://www.apress.com/9781430239963
WebGL: Up and Running
Learning Three.js:The JavaScript 3D Library for WebGL
http://shop.oreilly.com/product/0636920024729.do?cmp=af-prog-books-video-product-cj_auwidget217_0636920024729_4047008
http://www.packtpub.com/learning-three-js-javascript-3d-library-for-webgl/bookhttp://www.amazon.com/Learning-Three-js-JavaScript-Library-WebGL/dp/1782166289
Referencehttp://learningwebgl.com/blog/
Samplehttp://threejs.org/examples/https://code.google.com/p/webglsamples/http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
This is a list of all the WebGL related activities happening on the web. If you know of anything missing or out of date on this list, we invite you to add it or update it.http://www.khronos.org/webgl/wiki/User_Contributions
ReferencePhong reflection modelhttp://en.wikipedia.org/wiki/Phong_reflection_model
Lambertian reflectancehttp://en.wikipedia.org/wiki/Lambertian_reflectance
Mandelbrot sethttp://en.wikipedia.org/wiki/Mandelbrot_set
Julia sethttp://en.wikipedia.org/wiki/Julia_set
Thanks!