WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结
2018-02-01 18:56
513 查看
实现三维场景载入操作的实现步骤:
主要知识点:着色器,纹理贴图,文件载入
实现思路:
获取canvas,初始化WEBGL上下文信息。
初始化着色器
初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。
初始化纹理信息
载入世界
动画效果
实现了反复调用重绘函数
运动过程中响应按键的响应事件
绘制场景(重要)
绘制场景的函数中包括:
设置我的投影矩阵
设置我的模型视图矩阵
将模型视图投影矩阵传给顶点着色器
动画效果
主要知识点:着色器,纹理贴图,文件载入
实现思路:
获取canvas,初始化WEBGL上下文信息。
主要是实现WEBGL上下文的获取,设置视的大小,此时gl存储了WEBGL的上下文信息 |
初始化着色器
初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。
主要是实现: 创建着色器对象gl.CreateShader(); 获取顶点着色器和片元着色器源码gl.ShaderSource(); 编译着色器gl.CompileShader(); 创建程序对象gl.craeteProgram() 为程序对象分配着色器对象gl.attachShader(); 连接程序对象gl.LinkProgram(); 告知WEBGL系统所使用的程序对象gl.useProgram(); |
初始化纹理信息
创建纹理对象(载入纹理图片) |
载入世界
动画效果
实现了反复调用重绘函数
运动过程中响应按键的响应事件
绘制场景(重要)
绘制场景的函数中包括:
设置我的投影矩阵
设置我的模型视图矩阵
将模型视图投影矩阵传给顶点着色器
动画效果
相关文章推荐
- Android基础学习总结(十二)——利用Bmob实现用户账户体系(注册、登录、验证等)
- 利用XML配置实现增删改查的思路总结
- Flask学习总结笔记(8) -- 利用Flask-mail实现电子邮件发送功能
- Android基础学习总结(十三)——利用jsoup解析html实现网络爬虫
- Android service学习总结和利用service实现的后台音乐播放功能
- 【IOS 开发学习总结-OC-44】★★ios开发之UI控件——文本框与多行文本控件(彩蛋——上拉刷新一般实现代码)
- WebGL+ArcGIS JS API实现Web城市地下管线三维场景浏览
- 自己在项目中的学习总结:利用工厂模式+反射机制+缓存机制,实现动态创建不同的数据层对象接口
- WEBGL学习【十四】利用HUD技术在网页上方显示三维物体
- Flask学习总结笔记(10) -- 利用Werkzeug实现账号密码加密存储
- 孙鑫VC学习笔记:第十六讲 (一) 利用事件对象实现线程间的同步
- 孙鑫VC学习笔记:第十六讲 (二) 利用关键代码段实现线程间的同步
- struts2表单验证初步及国际化实现(学习总结)
- Ext学习总结——EditPanel的实现
- struts2表单验证初步及国际化实现(学习总结)
- 总结几个利用css中的expression对象实现的效果
- 利用OpenGL实现三维绘图
- 利用网络摄像头实现三维扫描
- 孙鑫VC学习笔记:第十六讲 利用关键代码段实现线程间的同步
- 《www.uml.org.cn》UML与代码学习--利用有限状态机实现FTP 文件传输