排序
WebGL入门(三十五)-三维物体雾化效果，立方体雾化效果
立方体雾化效果 1. demo效果2.相关知识点2.1 雾化相关概念2.2 雾化因子计算2.3 片元颜色计算 3.实现要点3.1 计算顶点与视点的距离3.2 计算雾化后片元颜色3.3 计算雾化所需数据传值 4. demo代码5...
2年前
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值
在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
2年前
WebGL入门(二十四)-光照原理、漫反射光计算、漫反射光照射下的立方体
漫反射光照射下的立方体1.demo效果2.相关知识点2.1 光照原理2.2 光源类型2.3 反射类型2.4 漫反射计算模型3.demo代码1.demo效果添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧...
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入门(十三)-通过片元着色器内置变量gl_FragCoord验证内插过程
通过片元着色器内置变量gl_FragCoord验证内插过程 1.demo效果2. 片元着色器的内置变量gl_FragCoord3. demo代码 1.demo效果 如上图，这个demo实现一个紫色渐变效果的三角形，通过使...
2年前
WebGL入门(三十四)-三维空间中鼠标控制物体旋转，用鼠标控制立方体的旋转
用鼠标控制立方体的旋转 1. demo效果2. 实现要点2.1 注册鼠标事件2.1.1 注册鼠标事件函数的声明2.1.2 注册鼠标事件函数的调用 2.2 纹理图片加载2.3 图形绘制 3. demo代码 1. demo效果 如上图&#x...
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入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 2.相...
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. ...
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.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
2年前
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
2年前