WebGL入门(九)-通过缩放矩阵实现图形(三角形)的缩放
通过缩放矩阵实现图形的缩放 1.缩放效果展示2.缩放矩阵推理3.使用缩放矩阵要点3.1声明缩放矩阵3.2获取缩放矩阵u_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
WebGL入门(八)-通过旋转矩阵实现图形(三角形)绕Z轴的旋转
通过旋转矩阵实现图形的旋转 1.旋转效果展示2.旋转矩阵推理3.使用旋转矩阵要点3.1声明旋转矩阵3.2获取旋转矩阵u_RotateMatrix的存储地址3.3向旋转矩阵u_RotateMatrix传值 4.demo代码 1.旋转效果...
WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移
通过平移矩阵实现图形的平移 1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值 4.demo代码 1.平...
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值
在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
WebGL入门(二)-属于WebGL的Hello Word
属于WebGL的Hello Word1.demo效果2.相关知识点2.1 Canvas2.1.1 获取Canvas对象2.1.2 获取Canvas的上下文2.2 着色器2.2.1 着色器分类2.2.2 着色器的初始化2.2.2.1 着色器语言数据类型（此例涉...
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
WebGL使用点光源照明（WebGL进阶06）
使用点光源照明 1. demo效果2. 点光源介绍3. 实现要点3.1 片元着色器中计算点光源3.2 准备绘制物体的数据3.3 绘制物体 4. demo代码 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源...
WebGL三维模型实现Phong着色（WebGL进阶05）
WebGL三维模型实现Phong着色 1. demo效果2. Phong着色与Gouraud 着色2.1Gouraud 着色2.2 Phong 着色 3. 实现要点4. demo代码 1. demo效果 2. Phong着色与Gouraud 着色 通过前面几篇文章，...
三维模型反射光照射实现、物体表面高光实现（WebGL进阶04）
三维模型反射光照射实现 1. demo效果2. 反射光介绍3. 实现要点3.1 反射光计算3.2 向着色器传值 4. demo代码 1. demo效果 2. 反射光介绍 反射光分为漫反射和镜面反射，平行光属于慢反射。...