WebGL入门

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

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

点光源使用,点光源照射下的立方体效果 1.demo效果2.相关知识点2.1 点光源方向计算 3. demo代码 1.demo效果 如上图,立方体在点光源照射下的效果,最前面的面右上角看起来比...
点燃火柴的头像-卡核点燃火柴2年前
03648982
WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放-卡核

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

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

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

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

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

使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
点燃火柴的头像-卡核点燃火柴2年前
05260913
WebGL入门(二十一)-三维视图对象前后关系的处理/隐藏面消除与深度冲突处理-卡核

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

对象前后关系的处理/隐藏面消除与深度冲突处理 1.demo效果2.相关知识点2.1 三维视图矩阵模型2.2 对象前后关系处理2.3 gl.enable()方法2.4 gl.disable()方法2.5 深度冲突2.6 gl.polygonOffset()...
点燃火柴的头像-卡核点燃火柴2年前
09353911
WebGL入门(三十九)-透明与不透明物体共存,绘制透明面和不透明面的立方体-卡核

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

绘制透明面和不透明面的立方体 1. 绘制透明立方体1.1 绘制透明立方体要点1.2 绘制透明立方体demo效果1.3 绘制透明立方体demo代码1.4 开启隐藏面消除后 2. 透明与不透明共存2.1 透明与不透明共存...
点燃火柴的头像-卡核点燃火柴2年前
05021911
WebGL入门(十六)-三维视图模型原理,视点、视线、观察点、上方向-卡核

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

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

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

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

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

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

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

逐片元处理点光源光照效果 1.demo效果2.实现要点2.1顶点着色器中声明varying变量2.2片元着色器中使用varying变量 3.demo代码 1.demo效果 如上图,图二为逐片元处理点光源的效果,与...
点燃火柴的头像-卡核点燃火柴2年前
05730786
WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角-卡核

WebGL入门(十七)-三维视图从指定视点观察变换后的图形/观察旋转后的三角

三维视图从指定视点观察变换后的图形 1.demo效果2.相关知识点2.1 从视点观察变换后图形的模型2.2 Matrix4对象的图形变换相关方法和属性 3.demo代码 1.demo效果 如上,图一是在视点观察到...
点燃火柴的头像-卡核点燃火柴2年前
09409786
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值-卡核

WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值

在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
点燃火柴的头像-卡核点燃火柴2年前
03252771