WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
WebGL入门(二十八)-物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
立方体动画旋转时点光源计算处理 1.demo效果2.实现要点2.1 声明顶点着色器2.2 声明动画函数tick 3.demo代码 1.demo效果 如上图，立方体旋转时点光源照射在指定的位置上的效果，照射...
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 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...
三维模型平行光照射实现（WebGL进阶02）
三维模型平行光照射实现 1. demo效果2. 知识要点2.1 平行光照射2.2 物体变换时表面法线处理 3. 实现要点3.1 顶点着色器3.2 相关矩阵计算 4. demo代码 1. demo效果 上图是平行光照射下效果 上图...
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
WebGL-Shader入门（1.着色器语言GLSL ES数据类型介绍与使用）
GLSL ES数据类型介绍与使用 1. GLSL ES介绍2. 变量定义3. 变量类型3.1 基本类型3.1.1 基本类型的介绍3.1.2 基本类型的赋值和类型转换 3.2 矢量3.2.1 矢量类型介绍3.2.2 矢量构造和赋值 3.3 矩阵...
shader编程-着色器中颜色基础（WebGL-Shader开发基础06）
shader编程-着色器中颜色基础 1. 单色背景颜色2. 颜色根据屏幕坐标变化3. 物体形状颜色4. 借助A通道处理物体形状颜色5. 相关代码 1. 单色背景颜色 在之前的文章中我们用一个三维向量表示颜色 ve...
WebGL-Shader入门（4.着色器语言GLSL ES函数定义与流程控制）
函数定义与流程控制 1. 函数定义1.1 函数结构1.2 规范声明 2 流程控制2.1 if语句2.2 for语句2.3 continue、break语句2.4 discard语句 1. 函数定义 1.1 函数结构 GLSL ES 的函数定义与C语言接近&...