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

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

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

实现思路:

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

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

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第1张图片

  1. 初始化着色器

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

    WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第2张图片

主要是实现:

  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实现三维场景的一般思路总结_第3张图片

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第4张图片

载入世界

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第5张图片

动画效果

实现了反复调用重绘函数

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

绘制场景(重要)

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第6张图片

绘制场景的函数中包括:

设置我的投影矩阵

设置我的模型视图矩阵

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

 

WEBGL学习【十五】利用WEBGL实现三维场景的一般思路总结_第7张图片

动画效果

你可能感兴趣的:(WEBGL学习,前端3D学习专区)