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使用点光源照明(WebGL进阶06)
使用点光源照明 1. demo效果2. 点光源介绍3. 实现要点3.1 片元着色器中计算点光源3.2 准备绘制物体的数据3.3 绘制物体 4. demo代码 1. demo效果 上图效果为原点处有点光源照射的效果 2. 点光源...
WebGL入门(一)-初识WebGL
初识WebGL 1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集,也就是专门用于Web页面的OpenGL 2.WebGL起源 ...
WebGL入门(三)-在JavaScript程序通过attribute变量向顶点着色器传值
在JavaScript程序通过attribute变量向着色器传值 1.demo效果2.相关知识点2.1 着色器中的attribute变量2.2 gl.getAttribLocation()方法2.3 gl.vertexAttrib3f()方法2.4 gl.vertexAttrib3f()的同...
WebGL入门(四)-在JavaScript程序通过uniform变量向片元着色器传值
在JavaScript程序通过uniform变量向片元着色器传值 1.demo效果2.相关知识点2.1 片元着色器中的uniform变量2.2 gl.getUniformLocation()方法2.3 gl.uniform4f()方法2.4 gl.uniform4f()的同族函数...
WebGL入门(五)-使用缓冲区对象向着色器传值绘制三角形
使用缓冲区对象向着色器传值绘制三角形 1.demo效果2.相关知识点2.1 什么是缓冲区对象2.2 使用缓冲区对象的步骤2.2.1 创建缓冲区对象2.2.2 绑定缓冲区2.2.3 向缓冲区对象写入数据2.2.4 将缓冲区...
WebGL入门(六)-通过坐标计算实现图形的平移、旋转和缩放变换
通过坐标计算实现图形的平移、旋转和缩放变换 1.图形的平移1.1平移效果说明1.2平移原理说明1.3平移图形的实现步骤1.3.1在顶点着色器中声明存放平移信息的uniform变量u_Translation1.3.2获取顶点...
WebGL入门(七)-通过平移矩阵实现图形(三角形)的平移
通过平移矩阵实现图形的平移 1.平移效果展示2.平移矩阵原理3.使用平移矩阵要点3.1声明平移矩阵3.2获取平移矩阵u_TranslateMatrix的存储地址3.3向平移矩阵u_TranslateMatrix传值 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_ScaleMatrix的存储地址3.3向缩放矩阵u_ScaleMatrix传值 4.demo代码 1.缩放效果展...
WebGL入门(十)-通过矩阵相乘实现图形(三角形)的组合变换
通过矩阵相乘实现图形的组合变换 1.组合变换效果展示2.知识点梳理2.1组合变换原理2.2组合变换实现要点2.2.1顶点着色器声明uniform变量u_ModelMatrix2.2.2声明模型矩阵Matrix4对象及其属性方法介...
WebGL入门(十一)-通过矩阵实现图形(三角形)的动画
通过矩阵相现图形的动画 1.动画效果展示2.动画效果原理3.动画实现要点4.demo代码 1.动画效果展示 第一个动画效果,是在动画处理函数中不断旋转的效果 第二个动画效果,是复合变换动...