排序
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对象及其属性方法介...
点燃火柴
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画
每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图，这次的demo效果与上一节一样...
点燃火柴
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形
通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上，通过透视投影矩阵创建了左右两排三角形&...
点燃火柴
WebGL入门(四十一)-使用帧缓冲区对象（FBO）实现将渲染结果作为纹理绘制到另一个物体上
将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象（FBO）2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
点燃火柴