玩转WebGL

WebGL(Web Graphics Library)是一种绘图标准,使用js绑定调用OpenGL ES的API,通过 HTML5 中 canvas元素实现功能.WebGL1.0版本对应的是OpenGL ES2.0,WebGL2.0版本对应的是OpenGL ES3.0.WebG…

这边的配置主要是让我们能在vscode中,直接通过运行来调用chrome浏览器来调试程序. 在bin文件夹下创建index.html,其中glcanvas就是绘图的画布,bundle.js是ts代码编译后的文件. webGL的尺寸是与canvas的宽高相关联的,不要使用css来…

上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去. 上节中,我们使用的是TypeScript的tsc编译的,由于使用的编译选项outFile,支持AMD,system的模块代码生成模式,不能直接导入文件作为字符串,所以使用webpack来编译. 项目根目…

缓冲区是驻存于内存中的javascript对象,存储着即将推送到着色器中的attribute对象.最常用的attribute对象莫过于记录了空间中点位置信息的aVertexPosition了.缓冲区如同一个长长的队列,着色器每处理完一个顶点(或和顶点对应的其他attribute…

为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识. 向量有一个方向和大小. 1.只有当左侧矩阵的列数与右侧矩阵的行数相等,两个矩阵才能相乘. 2.矩阵相乘不遵守交换律(Commutative),也就是说A⋅B≠B⋅A. 利用旋转矩阵我们可以把我们的位置向量…

现实世界的光照是极其复杂的，因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟，光照模型都是基于我们对光的物理特性的理解。 根据物理知识，不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光，就显示绿色。如果物体反射所有的色光，就显示白色。所以光源色和物…

镜面光照(Specular Lighting)依据光的方向向量和物体的法向量计算。 我们通过反射法向量周围光的方向计算反射向量。然后我们计算反射向量和视线方向的角度，如果之间的角度越小，那么镜面光的作用就会越大。它的作用效果就是，当我们去看光被物体所反射的那个方向的时候，我们会…

就是纹理图像上的坐标，通过纹理坐标可以在纹理图像上获取纹素颜色，webgl系统中的纹理坐标是二维的。

GLSL内建的texture函数来采样纹理的颜色，它第一个参数是纹理采样器，第二个参数是对应的纹理坐标。输出的是纹理的（插值）纹理坐标上的(过滤后的)颜色。 sampler2D是个uniform变量，为了片段着色器中可以设置多个纹理，给纹理采样器分配的是一个位置值。一个纹理的位…