WebGL技术经验分享课件

WebGL

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

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

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

一个JS物理引擎jDataView：ParseBinaryDataRenderMonkey:Shader编辑工具Emscripten：一个JS转换工具谢谢Q&A为更好满足学习和使用需求，课件在下载