排序
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
2年前
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL上下文丢失事件与上下文恢复事件处理 1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明 3. demo代码 1. dem...
2年前
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
2年前
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
2年前
WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角
三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上，图一是在视点观察到...
2年前
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理
对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
2年前
WebGL入门(四十二)-使用（FBO）实现阴影效果
使用（FBO）实现阴影效果 1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除 3. demo代码 1. demo效果 2. 相关知识点 ...
2年前
WebGL入门(二)-属于WebGL的Hello Word
属于WebGL的Hello Word1.demo效果2.相关知识点2.1 Canvas2.1.1 获取Canvas对象2.1.2 获取Canvas的上下文2.2 着色器2.2.1 着色器分类2.2.2 着色器的初始化2.2.2.1 着色器语言数据类型（此例涉...
2年前
WebGL入门(十二)-使用varying变量在顶点着色器给片元着色器传值，绘制彩色三角形
使用varying变量绘制彩色三角形 1.demo效果2.相关知识点2.1 varying变量介绍2.2 图形装配和格栅化2.3 内插过程 3. varying变量使用步骤3.1 顶点着色器中声明varying变量3.2 片元着色器中使用var...
2年前
WebGL入门(二十八)-物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图，立方体旋转时点光源照射在指定的位置上的效果，照射...
2年前
WebGL入门(三十六)-HUD（平视显示器）实现
HUD（平视显示器）实现 1. demo效果2.实现要点2.1 什么是HUD2.2 HUD实现2.2.1 准备画布2.2.2 绘制三维图形2.2.3 绘制HUD信息 3.demo代码 1. demo效果 如上图，在三维场景中叠...
2年前
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动
通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上，通过上下左右键调整视图矩阵的...
2年前