140716 : 同業前端聚會分享 - webgl 與 three.js

WebGL And Three.jsEIA - 2014 / 07 / 16

These slides are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

http://about.me/eia

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

http://activetheory.net/

Chrome IE11 IE8

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

three.js - JavaScript 3D library

http://threejs.org/

20 Impressive Examples for Learning WebGL with Three.js

http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/

http://threejs.org/examples/

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

http://v.hxsd.com/

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!