WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角
三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上，图一是在视点观察到...
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值
在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
使用shader绘制矩形、矩形框、圆形、圆形框（WebGL-Shader开发基础02）
绘制矩形、矩形框、圆形、圆形框 1.绘制矩形1.1 使用if语句绘制1.2 使用step函数绘制1.3 使用step函数简化方法绘制1.4 使用abs对称思想绘制1.5 绘制矩形边框 2. 绘制圆2.1 绘制圆形2.2 绘制圆形...
WebGL使用点光源照明（WebGL进阶06）
使用点光源照明 1. demo效果2. 点光源介绍3. 实现要点3.1 片元着色器中计算点光源3.2 准备绘制物体的数据3.3 绘制物体 4. demo代码 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源...
WebGL入门-WebGL常用API说明详解
WebGL常用API说明 1.设置背景色 gl.clearColor()2.清空绘图区 gl.clear()3.绘制操作 gl.drawArrays()4. attribute变量4.1 获取attribute变量地址 gl.getAttribLocation()4.2 给attribute变量传...
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体
通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动
通过上下左右键改变视点实现视图的移动 1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现 3. demo代码 1.demo效果 如上，通过上下左右键调整视图矩阵的...
shader编程-2D基本图形SDF(有向距离场)介绍与使用（WebGL-Shader开发基础05）
shader编程-2D基本图形SDF有向距离场介绍与使用 1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形3.1 绘制矩形3.2 绘制带圆角矩形3.3 通过两端和宽度绘制矩形 4. SDF绘制线段5. SDF绘制菱形6. SDF...
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
WebGL入门(四十三)-WebGL加载OBJ-MTL三维模型
WebGL加载OBJ-MTL三维模型 1. demo效果2. 相关知识点2.1 OBJ文件内容说明2.2 解析OBJ文件过程2.3 MTL文件内容说明2.4 准备绘图需要的缓冲区对象2.4 加载完成数据写入缓冲区对象 3. demo代码 1. ...
WebGL-Shader入门（2.着色器语言GLSL ES矢量和矩阵的访问与运算）
矢量类型和矩阵类型变量的访问与运算 1. 序2. 矢量的访问2.1 单一分量访问2.2 分量组合使用2.3 分量聚合作为左值使用 3. 矩阵的访问4. 矢量与矩阵支持的运算符5. 矢量与矩阵的运算5.1 矢量和数...
WebGL入门(四十二)-使用（FBO）实现阴影效果
使用（FBO）实现阴影效果 1. demo效果2. 相关知识点2.1 阴影如何产生2.2 阴影实现原理2.2.1 准备阴影贴图2.2.2 阴影映射2.2.3 马赫带消除 3. demo代码 1. demo效果 2. 相关知识点 ...