WebGL入门(二十七)-点光源使用,点光源照射下的立方体效果-卡核

WebGL入门(二十七)-点光源使用,点光源照射下的立方体效果

点光源使用,点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图,立方体在点光源照射下的效果,最前面的面右上角看起来比...
三维模型环境光照射实现(WebGL进阶03)-卡核

三维模型环境光照射实现(WebGL进阶03)

三维模型环境光照射实现 1. demo效果2. 环境光介绍3. 实现要点3.1 顶点着色器调整3.2 向着色器中传值环境光颜色 4. demo代码 1. demo效果 上图是平行光照射下效果 上图是平行光+环境光照射...
WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放-卡核

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

通过缩放矩阵实现图形的缩放 1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
WebGL入门(三十七)-绘制圆形的点-卡核

WebGL入门(三十七)-绘制圆形的点

绘制圆形的点 1. demo效果2. 实现要点2.1 绘制原理2.1 绘制实现 3. demo代码 1. demo效果 如上图,绘制出了三个红色的小圆点 2. 实现要点 2.1 绘制原理 我们已经知道在绘制图形时有一个光...
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形-卡核

WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形

使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
WebGL入门(三十九)-透明与不透明物体共存,绘制透明面和不透明面的立方体-卡核

WebGL入门(三十九)-透明与不透明物体共存,绘制透明面和不透明面的立方体

绘制透明面和不透明面的立方体 1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后 2. 透明与不透明共存2.1 透明与不透明共存...
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理-卡核

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

对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
shader编程-三维场景下SDF建模,平滑交集、平滑并集、平滑差集(WebGL-Shader开发基础11)-卡核

shader编程-三维场景下SDF建模,平滑交集、平滑并集、平滑差集(WebGL-Shader开发基础11)

三维场景下SDF建模,平滑交集、平滑并集、平滑差集 1. demo效果2. 实现要点2.1 平滑运算方法定义2.2 模型计算3. demo代码 1. demo效果 smooth-operate 如上所示,三个展示的模型分...
WebGL入门(十六)-三维视图模型原理,视点、视线、观察点、上方向-卡核

WebGL入门(十六)-三维视图模型原理,视点、视线、观察点、上方向

三维视图模型原理 1.demo效果2.相关知识点2.1 视点、视线、观察点、上方向2.2 创建视图矩阵 3. demo代码 1.demo效果 如上图,这个demo中三个不同颜色的三角形展示在三维坐标中。 2.相关知...
WebGL入门(三十二)-着色器和着色器程序对象,初始化着色器说明-卡核

WebGL入门(三十二)-着色器和着色器程序对象,初始化着色器说明

着色器和着色器程序对象,初始化着色器说明 1.initShaders() 函数创建步骤2.相关API介绍2.1创建着色器对象 gl.createShader()2.2指定着色器代码 gl.shaderSource()2.3编译着色器 gl.compi...
WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射-卡核

WebGL入门(十四)-用加载纹理图片在矩形表面上创建纹理贴图/实现纹理映射

在矩形表面上创建纹理贴图 1.demo效果2.相关知识点2.1 纹理、纹素、纹理映射、纹理坐标、坐标映射关系2.2 gl.createTexture()方法2.3 gl.pixelStorei()方法2.4 gl.activeTexture()方法2.5 gl.bi...
WebGL入门(二十九)-逐片元处理点光源光照效果-卡核

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

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