140716 : 同業前端聚會分享 - webgl 與 three.js
2 likes1,316 views
WebGL is a JavaScript API for rendering 3D graphics in a web browser without plugins. It is based on OpenGL ES 2.0 and uses the HTML5 Canvas element. Three.js is a popular JavaScript library that makes it easier to use WebGL for 3D graphics. It supports 3D models, materials, textures, lights, and effects. WebGL provides low-level rendering capabilities while Three.js handles complexities like scene graph management, animation, and events.
140716 : 同業前端聚會分享 - webgl 與 three.js
- 1. WebGL And Three.js EIA - 2014/ 07/ 16
- 3. About
- 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. 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/
- 7. caniuse- 14 / 06 / 06 http://caniuse.com/#feat=webgl Parent feature: Canvas (basic support)
- 11. WebGL in Safari
- 13. Mobile : THREE.CanvasRenderer(); Sony Z1 (2013) HTC Desire HD (2010) iPhone 4 (2010)
- 14. Frameworks
- 16. Debug
- 21. 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
- 22. Three.JS
- 23. three.js - JavaScript 3D library http://threejs.org/
- 24. 20 Impressive Examples for Learning WebGL with Three.js http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
- 26. Coding
- 27. 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 );
- 28. 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 );
- 29. Away3d 4.x ?
- 30. 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
- 34. renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer = new THREE.CanvasRenderer(); ** THREE.Particle(material); // CanvasRenderer ** THREE.ParticleSystem(geom, material); // WebGLRenderer
- 35. Geometry
- 40. VertexNormals();
- 45. Materials
- 50. Camera
- 52. 3d Model
- 56. https://github.com/tparisi/WebGLBook/blob/master/Chapter%204/keyframe-robot.html
- 57. No keyframes in 3D model
- 58. .dae .js
- 61. Particles
- 67. Spark.js
- 68. Interaction
- 69. 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
- 70. Books
- 71. 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
- 72. 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
- 73. 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
- 74. Thanks!