排序
WebGL入门(二十三)-绘制每个面指定颜色的立方体
绘制每个面指定颜色的立方体 1.demo效果2.相关知识点2.1 每个面指定颜色原理2.2 定义顶点坐标、顶点颜色、顶点索引数组 3.demo代码 1.demo效果 如上，绘制了不同面指定颜色的立方体 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入门(十二)-使用varying变量在顶点着色器给片元着色器传值，绘制彩色三角形
使用varying变量绘制彩色三角形 1.demo效果2.相关知识点2.1 varying变量介绍2.2 图形装配和格栅化2.3 内插过程 3. varying变量使用步骤3.1 顶点着色器中声明varying变量3.2 片元着色器中使用var...
点燃火柴
WebGL入门(三十三)-通过鼠标点击选中立方体，选中立方体的某个面
通过鼠标点击选中立方体，选中立方体的某个面 1.三维物体选中原理与实现步骤1.1物体选中原理1.2物体选中实现步骤1.2.1注册鼠标点击事件1.2.2顶点着色器作特定值设置处理1.2.3告诉顶点着色...
点燃火柴
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
点燃火柴
WebGL入门(二十二)-通过顶点索引绘制渐变色的立方体
通过顶点索引绘制渐变色的立方体 1.demo效果2.相关知识点2.1 顶点索引原理2.2 gl.drawElements() 方法 3.demo代码 1.demo效果 如上，通过顶点索引绘制出了一个渐变色的立方体 2.相关知识...
点燃火柴
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入门(十一)-通过矩阵实现图形(三角形)的动画
通过矩阵相现图形的动画 1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码 1.动画效果展示 第一个动画效果，是在动画处理函数中不断旋转的效果 第二个动画效果，是复合变换动...
点燃火柴
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 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
点燃火柴
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.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介...
点燃火柴
