WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结

实现三维场景载入操作的实现步骤:

主要知识点:着色器,纹理贴图,文件载入

实现思路:

  1. 获取canvas,初始化WEBGL上下文信息。

主要是实现WEBGL上下文的获取,设置视的大小,此时gl存储了WEBGL的上下文信息

  1. 初始化着色器

    初始化的过程中也在这里获得了顶点着色器和片元着色器中的变量存储的地址信息。

主要是实现:

  1. 创建着色器对象gl.CreateShader();
  2. 获取顶点着色器和片元着色器源码gl.ShaderSource();
  3. 编译着色器gl.CompileShader();
  4. 创建程序对象gl.craeteProgram()
  5. 为程序对象分配着色器对象gl.attachShader();
  6. 连接程序对象gl.LinkProgram();
  7. 告知WEBGL系统所使用的程序对象gl.useProgram();

 

  1. 初始化纹理信息
创建纹理对象(载入纹理图片)

载入世界

动画效果

实现了反复调用重绘函数

运动过程中响应按键的响应事件

绘制场景(重要)

绘制场景的函数中包括:

设置我的投影矩阵

设置我的模型视图矩阵

将模型视图投影矩阵传给顶点着色器

 

动画效果

转载于:https://www.cnblogs.com/52tech/p/9325108.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值