Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebGL And Three.js
EIA - 2014/ 07/ 16
http://about.me/eia
About
WIKI
WebGL是一項利用JavaScript API呈現3D電腦圖形的技術,有別於過往需加裝瀏覽
器外掛程式,透過WebGL的技術,只需要編寫網頁代碼即可實現3D圖像的展示。
WebGL的規格尚在發展中,由非營利的Khronos Grou...
WebGL API
WebGL™ is an immediate mode 3D rendering API designed for the web. It is derived from OpenGL® ES 2.0, and provid...
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: 13
Chrome
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/Debugging
http://benvanik.github.io/WebGL-Inspector/
The popup is extensive and first shows
a mesh of the element drawn that can
be zoomed in
and out with the mouse wheel and
...
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-learnin...
http://threejs.org/examples/
Coding
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xDDDDDD, 0.00001);
renderer = new THREE.WebGLRenderer({antialia...
var mapUrl = "../images/molumen_small_funny_angry_monster.jpg";
var map = THREE.ImageUtils.loadTexture(mapUrl);
// Now, cr...
Away3d 4.x ?
1. Renderer
> webgl vs canvas (performance)
> CSS3DRenderer, SoftwareRenderer
2. Geometry
3. Material
4. Camera
5. 3d Mode...
Renderer
WebGL / CANVAS
http://threejs.org/examples/#canvas_interactive_cubes
http://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(materi...
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_video
https://github.com/tparisi/WebGLBook/blob/master/Chap...
http://threejs.org/examples/#webgl_materials_lightmap
ShaderMaterial
Camera
Orthographic | Perspective
https://github.com/josdirksen/learning-threejs
https://github.com/josdirksen/learning-threejs/b...
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.js
https://github.com/zz85/sparks.js
Spark.js
MIT license
Spark.js
Interaction
Interaction
WebGL is only a drawing system and, as such, has no
built-in support for hit detection. You need to build that...
Books
BeginningWebGL for HTML5
https://www.apress.com/9781430239963
WebGL: Up and Running
Learning Three.js:
The JavaScript 3D L...
Reference
http://learningwebgl.com/blog/
Sample
http://threejs.org/examples/
https://code.google.com/p/webglsamples/
http:...
Reference
Phong reflection model
http://en.wikipedia.org/wiki/Phong_reflection_model
Lambertian reflectance
http://en.wiki...
Thanks!
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
140716 : 同業前端聚會分享 - webgl 與 three.js
Upcoming SlideShare
Loading in …5
×

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

983 views

Published on

Webgl 與 Three.js 介紹、個人學習經驗

Published in: Technology
  • Be the first to comment

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

  1. 1. WebGL And Three.js EIA - 2014/ 07/ 16
  2. 2. http://about.me/eia
  3. 3. About
  4. 4. WIKI WebGL是一項利用JavaScript API呈現3D電腦圖形的技術,有別於過往需加裝瀏覽 器外掛程式,透過WebGL的技術,只需要編寫網頁代碼即可實現3D圖像的展示。 WebGL的規格尚在發展中,由非營利的Khronos Group管理。 WebGL基於OpenGL ES 2.0,提供了3D影像的程式介面。它使用HTML5 Canvas並 允許利用文件物件模型介面。可利用部分Javascript實作自動記憶體管理。 http://zh.wikipedia.org/wiki/WebGL http://en.wikipedia.org/wiki/WebGL
  5. 5. WebGL API WebGL™ 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/
  6. 6. Browser Support
  7. 7. caniuse- 14 / 06 / 06 http://caniuse.com/#feat=webgl Parent feature: Canvas (basic support)
  8. 8. http://webglsamples.googlecode.com/hg/aquarium/aquarium.html IE11 fps: 13 Chrome fps: 59
  9. 9. IE8 IE11 http://onemillionreasons.audi.de/ Chrome
  10. 10. http://activetheory.net/ Chrome IE11 IE8
  11. 11. WebGL in Safari
  12. 12. Apple WWDC 2014 http://learningwebgl.com/blog/?p=6368
  13. 13. Mobile : THREE.CanvasRenderer(); Sony Z1 (2013) HTC Desire HD (2010) iPhone 4 (2010)
  14. 14. Frameworks
  15. 15. http://www.khronos.org/webgl/wiki/User_Contributions
  16. 16. Debug
  17. 17. Debug WebGL Inspector http://www.khronos.org/webgl/wiki/Debugging http://benvanik.github.io/WebGL-Inspector/
  18. 18. The popup is extensive and first shows a mesh of the element drawn that can be zoomed in and out with the mouse wheel and rotated while holding down a mouse button. BeginningWebGL for HTML5
  19. 19. Three.JS
  20. 20. three.js - JavaScript 3D library http://threejs.org/
  21. 21. 20 Impressive Examples for Learning WebGL with Three.js http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
  22. 22. http://threejs.org/examples/
  23. 23. Coding
  24. 24. 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 );
  25. 25. 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 map var material = new THREE.MeshPhongMaterial({ map: map }); // Create the cube geometry var geometry = new THREE.CubeGeometry(1, 1, 1); // And put the geometry and material together into a mesh cube = 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 scene scene.add( cube );
  26. 26. Away3d 4.x ?
  27. 27. 1. Renderer > webgl vs canvas (performance) > CSS3DRenderer, SoftwareRenderer 2. Geometry 3. Material 4. Camera 5. 3d Model 6. Interactive 7. Particles My ThreeJS Learning Experience
  28. 28. Renderer WebGL / CANVAS
  29. 29. http://threejs.org/examples/#canvas_interactive_cubes http://threejs.org/examples/#webgl_interactive_cubes canvas webgl
  30. 30. http://threejs.org/examples/#css3d_molecules CSS3DRenderer
  31. 31. renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer = new THREE.CanvasRenderer(); ** THREE.Particle(material); // CanvasRenderer ** THREE.ParticleSystem(geom, material); // WebGLRenderer
  32. 32. Geometry
  33. 33. http://threejs.org/examples/#webgl_geometries
  34. 34. http://threejs.org/examples/#webgl_geometry_nurbs
  35. 35. http://threejs.org/examples/#canvas_geometry_terrain
  36. 36. http://threejs.org/examples/#canvas_geometry_birds
  37. 37. VertexNormals();
  38. 38. http://threejs.org/examples/#webgl_morphnormals
  39. 39. http://threejs.org/examples/#webgl_geometry_normals
  40. 40. Materials
  41. 41. http://threejs.org/examples/#canvas_materials
  42. 42. http://threejs.org/examples/#canvas_materials_depth THREE.MeshDepthMaterial
  43. 43. Dynamic Textures http://threejs.org/examples/#canvas_materials_video https://github.com/tparisi/WebGLBook/blob/master/Chapter%206/integration-canvas.html
  44. 44. http://threejs.org/examples/#webgl_materials_lightmap ShaderMaterial
  45. 45. Camera
  46. 46. Orthographic | Perspective https://github.com/josdirksen/learning-threejs https://github.com/josdirksen/learning-threejs/blob/master/chapter-02/07-both-cameras.html
  47. 47. 3d Model
  48. 48. http://v.hxsd.com/
  49. 49. https://github.com/tparisi/WebGLBook/blob/master/Chapter%204/keyframe-robot.html
  50. 50. No keyframes in 3D model
  51. 51. .dae .js
  52. 52. .dae http://stackoverflow.com/questions/110426/how-to-serve-files-from-iis-6-on-windows-server-2003 cache!
  53. 53. Particles
  54. 54. http://threejs.org/examples/#canvas_particles_sprites Sprites
  55. 55. http://threejs.org/examples/#webgl_particles_shapes Sparks
  56. 56. http://threejs.org/examples/#webgl_particles_shapes - addInitializer(); - addAction();
  57. 57. Spark.js https://github.com/zz85/sparks.js
  58. 58. Spark.js MIT license
  59. 59. Spark.js
  60. 60. Interaction
  61. 61. Interaction WebGL 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
  62. 62. Books
  63. 63. BeginningWebGL for HTML5 https://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/book http://www.amazon.com/Learning-Three-js-JavaScript-Library-WebGL/dp/1782166289
  64. 64. Reference http://learningwebgl.com/blog/ Sample http://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
  65. 65. Reference Phong reflection model http://en.wikipedia.org/wiki/Phong_reflection_model Lambertian reflectance http://en.wikipedia.org/wiki/Lambertian_reflectance Mandelbrot set http://en.wikipedia.org/wiki/Mandelbrot_set Julia set http://en.wikipedia.org/wiki/Julia_set
  66. 66. Thanks!

×