WebGL入门

WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理-卡核

WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理

对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
点燃火柴的头像-卡核点燃火柴
9468911
WebGL入门-WebGL常用API说明详解-卡核

WebGL入门-WebGL常用API说明详解

WebGL常用API说明 1.设置背景色 gl.clearColor()2.清空绘图区 gl.clear()3.绘制操作 gl.drawArrays()4. attribute变量4.1 获取attribute变量地址 gl.getAttribLocation()4.2 给attribute变量传...
点燃火柴的头像-卡核点燃火柴
3147755
WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换-卡核

WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换

通过矩阵相乘实现图形的组合变换 1.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介...
点燃火柴的头像-卡核点燃火柴
3414160
WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画-卡核

WebGL入门(三十一)-每个部件使用不同的缓冲区对象实现机械臂模拟动画

每个部件使用不同的缓冲区对象实现机械臂模拟动画 1.demo效果2.实现要点2.1声明各个组件顶点并创建缓冲区对象2.2绘制各个组件 3.demo代码 1.demo效果 如上图,这次的demo效果与上一节一样...
点燃火柴的头像-卡核点燃火柴
9817276
WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形-卡核

WebGL入门(二十)-三维视图通过透视投影矩阵创建远小近大的两排三角形

通过透视投影矩阵创建远小近大的两排三角形 1.demo效果2.相关知识点2.1 透视投影2.2 Matrix4.setPerspective()函数 3. demo代码 1.demo效果 如上,通过透视投影矩阵创建了左右两排三角形&...
点燃火柴的头像-卡核点燃火柴
7615107
WebGL入门(四十一)-使用帧缓冲区对象(FBO)实现将渲染结果作为纹理绘制到另一个物体上-卡核

WebGL入门(四十一)-使用帧缓冲区对象(FBO)实现将渲染结果作为纹理绘制到另一个物体上

将渲染结果作为纹理绘制到另一个物体上 1. demo效果2. 相关知识点2.1 帧缓冲区对象(FBO)2.2 渲染到纹理配置步骤 3. 相关API3.1 创建帧缓冲区对象 gl.createFramebuffer()3.2 删除...
点燃火柴的头像-卡核点燃火柴
1W+694
WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放-卡核

WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放

通过缩放矩阵实现图形的缩放 1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
点燃火柴的头像-卡核点燃火柴
7434955
WebGL入门(三十)-利用层次模型实现机械臂模拟动画-卡核

WebGL入门(三十)-利用层次模型实现机械臂模拟动画

利用层次模型实现机械臂模拟动画 1.demo效果2.实现要点2.1绘制各个模型块2.2绘制方块函数2.3动画函数 2.demo代码 1.demo效果 如上图,实现了模拟机械臂搬运方块动画 2.实现要点 2.1绘制各...
点燃火柴的头像-卡核点燃火柴
8820668
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失-卡核

WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失

三维视图正射投影矩阵 1.demo效果2.相关知识点2.1 正射投影2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果 如上,通过上下键调整正投影矩阵参数far的值,通过左右键调整正投影...
点燃火柴的头像-卡核点燃火柴
7899557
WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体-卡核

WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体

通过切换着色器实现一个页面同时展示多个立方体 1. demo效果2. demo实现步骤2.1 准备绘制单色立方体的着色器2.2 准备绘制纹理立方体的着色器2.3 创建绘制单色立方体的程序对象2.4 创建绘制纹理...
点燃火柴的头像-卡核点燃火柴
7391751
WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转-卡核

WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转

通过旋转矩阵实现图形的旋转 1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值 4.demo代码 1.旋转效果...
点燃火柴的头像-卡核点燃火柴
453958
WebGL入门(二十九)-逐片元处理点光源光照效果-卡核

WebGL入门(二十九)-逐片元处理点光源光照效果

逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图,图二为逐片元处理点光源的效果,与...
点燃火柴的头像-卡核点燃火柴
5781786