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

版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79232119

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

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

实现思路:

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

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

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

  1. 初始化着色器

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

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

主要是实现:

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

 

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

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

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

载入世界

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

动画效果

实现了反复调用重绘函数

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

绘制场景(重要)

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

绘制场景的函数中包括:

设置我的投影矩阵

设置我的模型视图矩阵

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

 

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

动画效果

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

上一篇:线程生命周期(状态)


下一篇:使用 OpenSSL API 进行安全编程