WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
WebGL入门(三十七)-绘制圆形的点
绘制圆形的点 1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现 3. demo代码 1. demo效果 如上图，绘制出了三个红色的小圆点 2. 实现要点 2.1 绘制原理 我们已经知道在绘制图形时有一个光...
WebGL-Shader入门（5.着色器语言GLSL ES 内置变量和内置函数）
GLSL ES 内置变量和内置函数 1. 内置变量1.1 gl_PointSize1.2 gl_Position1.3 gl_FragColor1.4 gl_FragCoord1.5 gl_PointCoord 2. 内置函数2.1 通用函数2.2 角度和三角函数2.3 指数函数2.4 几何...
使用VBO、IBO创建彩色甜圈圈（WebGL进阶01）
使用VBO、IBO创建彩色甜圈圈 1. demo效果2. 实现要点2.1 初始化顶点信息2.2 向着色器传值2.3 注册鼠标拖拽事件 3. demo代码 1. demo效果 2. 实现要点 2.1 初始化顶点信息 如上图绘制甜圈圈的思...
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语言接近&...
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
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入门(二十九)-逐片元处理点光源光照效果
逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图，图二为逐片元处理点光源的效果，与...
使用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入门(三十二)-着色器和着色器程序对象，初始化着色器说明
着色器和着色器程序对象，初始化着色器说明 1.initShaders() 函数创建步骤2.相关API介绍2.1创建着色器对象 gl.createShader()2.2指定着色器代码 gl.shaderSource()2.3编译着色器 gl.compi...
WebGL入门(二十六)-同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
立方体平移旋转缩放变换时漫反射光和环境反射光处理 1.demo效果2.相关知识点2.1 相关回顾2.2 环境反射光计算模型2.3 物体表面反射光计算 3.demo代码 1.demo效果 如上，图一是没添加环境光...
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...