WebGL技术经验分享课件

WebGL

技术经验分享OAK3DWebGL技术经验分享1什么是WEBGLWebGL是用于在网页中实现高效图形绘制的前端标准实时的3D更快的2DWebGL是HTML5的一部分什么是WEBGLWebGL是用于在网页中实现高效图形绘制的2什么是WEBGLWebGL是一份标准化组织、浏览器厂商与开发者订立的三方合同WebGL是一套基于JavaScript的API接口什么是WEBGLWebGL是一份标准化组织、浏览器厂商与开3WEBGL能做什么无客户端/无插件的网页3D平台高质量的网页3D内容可与用户三维交互的应用WEBGL能做什么无客户端/无插件的网页3D平台4WEBGL能做什么网页游戏三维产品在线展示商用/科学数据可视化三维结构的网页在线广告/电影宣传等艺术设计领域WEBGL能做什么网页游戏5为什么是WEBGLFlash?Unity3D?CustomPlugin?WebGL!NativeClientinFuture!为什么是WEBGLFlash?6WEBGL运行结构BrowserWeb3D

AppWebGLAPIWebGLImplementationOpenGLOpenGLESDirectXOtherDriverWEBGL运行结构BrowserWeb3DAppWebGL7开发环境你喜欢的任何一款文本编辑器开发环境你喜欢的任何一款文本编辑器8调试环境FireBugforFirefoxChromeDeveloperToolsWebGLInspectorOperaDragonfly（forMobilePlatform）gl.getError调试环境FireBugforFirefox93D程序结构CreateCanvasInitWebGLLoadResourceDrawCompileShaderUpdateLogic3D程序结构CreateCanvasInitWebGLL10加载模型/纹理资源WebGL不具备编辑功能WebGL无默认加载格式加载模型/纹理资源WebGL不具备编辑功能11加载模型/纹理资源创建资源：3dsMaxMayaBlender其它模型编辑工具逆向工程工具

加载模型/纹理资源创建资源：12加载模型/纹理资源开放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary3D领域无放之四海皆合适的资源格式选择适合你的应用的加载模型/纹理资源开放模型格式：Collada,FBX,13加载模型/纹理资源开放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary加载模型/纹理资源开放模型格式：Collada,FBX,14加载模型/纹理资源纹理格式：jpg,png,bmp,gif纹理尺寸：Powerof2纹理限制：最好不超过2048纹理加载方式：Image,Canvas,Video,Array加载模型/纹理资源纹理格式：jpg,png,bmp,g15一点心得体会注意Js和GPU端负载平衡传统3D开发经验未必适用常见误区：3D开发，瓶颈自然在GPU端一点心得体会注意Js和GPU端负载平衡16一点心得体会小心设计你的系统提防GarbageCollection一点心得体会小心设计你的系统17一点心得体会确保你的程序使用的资源和能力没有超出一般范围Attribute<=8Uniform<=256Varying<=8TextureSize<=2048一点心得体会确保你的程序使用的资源和能力没有超出一般范围18一点心得体会在Mobile平台测试你的程序OperaMobileFirefoxMobileUC(部分支持)一点心得体会在Mobile平台测试你的程序19怎样学习一些基本数学知识高等数学中的立体几何部分线性代数中的矩阵部分怎样学习一些基本数学知识20怎样学习加一点点计算机图形学基础三维空间的矩阵变换透视/正交投影原理Phong光照模型怎样学习加一点点计算机图形学基础21怎样学习跟WebGL实例教程学习熟悉WebGL接口上手实践怎样学习跟WebGL实例教程学习22参考资料3D基础部分3D游戏大师编程技巧–AndreLaMotheRealtimeRendering–TomasAkenine-MollerGPUGemsShaderX参考资料3D基础部分23参考资料WebGL相关参考资料WebGL相关24参考资料Demo参考资料Demo25参考资料第三方框架和工具Oak3DThree.jsGLGEC3DLAmmo.js：

一个JS物理引擎jDataView：ParseBinaryDataRenderMonkey:Shader编辑工具Emscripten：一个JS转换工具参考资料第三方框架和工具26谢谢Q&A谢谢Q&A27为更好满足学习和使用需求，课件在下载后自由编辑，请根据实际情况进行调整Thankyouforwatchingandlistening.Ihopeyoucanmakegreatprogress为更好满足学习和使用需求，课件在下载后自由编辑，请根据实际情28WebGL

技术经验分享OAK3DWebGL技术经验分享29什么是WEBGLWebGL是用于在网页中实现高效图形绘制的前端标准实时的3D更快的2DWebGL是HTML5的一部分什么是WEBGLWebGL是用于在网页中实现高效图形绘制的30什么是WEBGLWebGL是一份标准化组织、浏览器厂商与开发者订立的三方合同WebGL是一套基于JavaScript的API接口什么是WEBGLWebGL是一份标准化组织、浏览器厂商与开31WEBGL能做什么无客户端/无插件的网页3D平台高质量的网页3D内容可与用户三维交互的应用WEBGL能做什么无客户端/无插件的网页3D平台32WEBGL能做什么网页游戏三维产品在线展示商用/科学数据可视化三维结构的网页在线广告/电影宣传等艺术设计领域WEBGL能做什么网页游戏33为什么是WEBGLFlash?Unity3D?CustomPlugin?WebGL!NativeClientinFuture!为什么是WEBGLFlash?34WEBGL运行结构BrowserWeb3D

AppWebGLAPIWebGLImplementationOpenGLOpenGLESDirectXOtherDriverWEBGL运行结构BrowserWeb3DAppWebGL35开发环境你喜欢的任何一款文本编辑器开发环境你喜欢的任何一款文本编辑器36调试环境FireBugforFirefoxChromeDeveloperToolsWebGLInspectorOperaDragonfly（forMobilePlatform）gl.getError调试环境FireBugforFirefox373D程序结构CreateCanvasInitWebGLLoadResourceDrawCompileShaderUpdateLogic3D程序结构CreateCanvasInitWebGLL38加载模型/纹理资源WebGL不具备编辑功能WebGL无默认加载格式加载模型/纹理资源WebGL不具备编辑功能39加载模型/纹理资源创建资源：3dsMaxMayaBlender其它模型编辑工具逆向工程工具

加载模型/纹理资源创建资源：40加载模型/纹理资源开放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary3D领域无放之四海皆合适的资源格式选择适合你的应用的加载模型/纹理资源开放模型格式：Collada,FBX,41加载模型/纹理资源开放模型格式：Collada,FBX,obj等自有模型格式：JSON,XML,Binary加载模型/纹理资源开放模型格式：Collada,FBX,42加载模型/纹理资源纹理格式：jpg,png,bmp,gif纹理尺寸：Powerof2纹理限制：最好不超过2048纹理加载方式：Image,Canvas,Video,Array加载模型/纹理资源纹理格式：jpg,png,bmp,g43一点心得体会注意Js和GPU端负载平衡传统3D开发经验未必适用常见误区：3D开发，瓶颈自然在GPU端一点心得体会注意Js和GPU端负载平衡44一点心得体会小心设计你的系统提防GarbageCollection一点心得体会小心设计你的系统45一点心得体会确保你的程序使用的资源和能力没有超出一般范围Attribute<=8Uniform<=256Varying<=8TextureSize<=2048一点心得体会确保你的程序使用的资源和能力没有超出一般范围46一点心得体会在Mobile平台测试你的程序OperaMobileFirefoxMobileUC(部分支持)一点心得体会在Mobile平台测试你的程序47怎样学习一些基本数学知识高等数学中的立体几何部分线性代数中的矩阵部分怎样学习一些基本数学知识48怎样学习加一点点计算机图形学基础三维空间的矩阵变换透视/正交投影原理Phong光照模型怎样学习加一点点计算机图形学基础49怎样学习跟WebGL实例教程学习熟悉WebGL接口上手实践怎样学习跟WebGL实例教程学习50参考资料3D基础部分3D游戏大师编程技巧–AndreLaMotheRealtimeRendering–TomasAkenine-MollerGPUGemsShaderX参考资料3D基础部分51参考资料WebGL相关参考资料WebGL相关52参考资料Demo参考资料Demo53参考资料第三方框架和工具Oak3DThree.jsGLGEC3DLAmmo.js：

一个JS物理引擎jDataView：