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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79232119 实现三维场景载入操作的实现步骤:主要知识点:着色器,纹理贴图,文件载入实现思路:获取canvas,初始化WEBGL上下文信息。
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/79232119

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

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

实现思路:

  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. 初始化纹理信息
创建纹理对象(载入纹理图片)

载入世界

动画效果

实现了反复调用重绘函数

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

绘制场景(重要)

绘制场景的函数中包括:

设置我的投影矩阵

设置我的模型视图矩阵

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

 

动画效果

相关文章
|
30天前
|
移动开发 前端开发 JavaScript
游戏开发技术- 请谈谈WebGL与Canvas的区别,以及在什么情况下更适合使用WebGL。
WebGL和Canvas都是网页游戏开发的关键技术。Canvas是2D绘图API,适合初学者和简单的2D游戏,而WebGL是基于OpenGL的3D渲染标准,用于复杂3D图形和游戏,提供GPU硬件加速。当涉及3D渲染、高级视觉效果或高性能需求时,WebGL是更好的选择。对于轻量级2D应用,Canvas就足够了。某些游戏引擎支持两者自动切换,以实现最佳性能和兼容性。
|
4月前
|
XML Java Android开发
Android App开发中OpenGL三维投影的讲解及实现(附源码和演示 简单易懂)
Android App开发中OpenGL三维投影的讲解及实现(附源码和演示 简单易懂)
37 1
|
9月前
|
前端开发 JavaScript
Threejs入门进阶实战案例(3):视频贴图的解决方案
Threejs入门进阶实战案例(3):视频贴图的解决方案
225 0
|
9月前
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
65 0
|
11月前
|
定位技术
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上
107 0
|
11月前
|
前端开发 定位技术
从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
114 0
从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建
|
数据可视化
【视觉高级篇】20 # 如何用WebGL绘制3D物体?
【视觉高级篇】20 # 如何用WebGL绘制3D物体?
138 0
【视觉高级篇】20 # 如何用WebGL绘制3D物体?
|
Web App开发 数据可视化 容器
基于Threejs构建的3D立体空间实战入门
本文将简单介绍Threejs的相关基础知识,四个基础对象组件。最后采用一个实例一步一步的进行3D房间展示,最终达到可视化的效果。
342 0
基于Threejs构建的3D立体空间实战入门
|
前端开发 JavaScript 容器
Three.js入门: 构建一个立方体
Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。前面介绍过一些基本的知识和实现简单的效果《Three.js 入门指南》和《【Three.js】随着元宇宙开启WEB3D之路》,本文从简单的构建立方体出发,介绍一些基础概念。
156 0
|
前端开发 JavaScript 异构计算
WebGL基础笔记
WebGL基础笔记
158 0