WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
WebGL-Shader入门（3.着色器语言的限定词-参数限定词/存储限定词/精度限定词）
着色器语言的限定词 1. 序2 参数限定词3 存储限定词4 精度限定词 1. 序 GLSL ES 中提供了三类限定词(又称限定字或限定符，都是一回事，本文统称为限定词)，参数限定词、存储...
WebGL入门(四十四)-WebGL上下文丢失事件与上下文恢复事件处理
WebGL上下文丢失事件与上下文恢复事件处理 1. demo效果2. 相关知识点2.1 上下文丢失介绍2.2 WebGL提供的响应事件2.3 响应事件处理2.3.1 响应事件注册2.3.2 响应事件实现说明 3. demo代码 1. dem...
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射
在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现 1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值 4. demo代码 1. demo效果 2. 反射光介绍 反射光分为漫反射和镜面反射，平行光属于慢反射。...
shader编程-RayMarching三维场景下模型基本变换旋转、缩放、平移（WebGL-Shader开发基础09）
RayMarching三维场景下模型基本变换 1. demo概述2. 实现过程2.1 模型的旋转操作2.2 模型的缩放操作2.3 模型的平移操作 3. demo 代码 1. demo概述 在之前的一篇文章中讲述了，二维空间中物...
WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角
三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上，图一是在视点观察到...
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理
对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
WebGL入门(四十二)-使用（FBO）实现阴影效果
使用（FBO）实现阴影效果 1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除 3. demo代码 1. demo效果 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 着色器语言数据类型（此例涉...
使用shader绘制线、线段、曲线（WebGL-Shader开发基础01）
使用shader绘制线、线段、曲线 0.序1. 绘制线1.1 绘制水平线1.1.1 根据判断条件着色绘制1.1.2 使用step函数绘制1.1.3 使用smoothstep函数绘制 1.2 绘制垂直线1.3绘制斜线1.3.1使用step函数绘制1...