![](https://img-blog.csdnimg.cn/a4232733241747ae84902702aee04c81.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
玩转WebGL
文章平均质量分 60
使用TypeScript语言进行WebGL开发,实例代码地址:https://github.com/lear315/webgl-memo(请根据章节切换git分支)
李尔在此
这个作者很懒,什么都没留下…
展开
-
玩转WebGL(九)纹理贴花
纹理单元上节中通过采样器(Sampler)将纹理对象传给片段着色器uniform sampler2D u_Sampler;GLSL内建的texture函数来采样纹理的颜色,它第一个参数是纹理采样器,第二个参数是对应的纹理坐标。输出的是纹理的(插值)纹理坐标上的(过滤后的)颜色。sampler2D是个uniform变量,为了片段着色器中可以设置多个纹理,给纹理采样器分配的是一个位置值。一个纹理的位置值通常称为一个纹理单元(Texture Unit)。默认纹理单元是0,它是默认的激活纹理单元。 l原创 2022-02-09 19:56:18 · 2457 阅读 · 0 评论 -
玩转WebGL(八)立方体纹理
纹理映射步骤:准备纹理图像配置集合图形纹理映射方式加载和配置纹理图像从纹理中抽出纹素赋给片元纹理坐标就是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色,webgl系统中的纹理坐标是二维的。设置纹理坐标: private texCoords = [ 1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 1.0, 0.0,原创 2022-02-09 19:55:28 · 2235 阅读 · 0 评论 -
玩转WebGL(七)冯氏光照模型
镜面光照镜面光照(Specular Lighting)依据光的方向向量和物体的法向量计算。我们通过反射法向量周围光的方向计算反射向量。然后我们计算反射向量和视线方向的角度,如果之间的角度越小,那么镜面光的作用就会越大。它的作用效果就是,当我们去看光被物体所反射的那个方向的时候,我们会看到一个高光。观察向量是镜面光照的一个附加变量,我们可以使用观察者世界空间位置(Viewer’s World Space Position)和片段的位置来计算。之后,我们计算镜面光亮度,用它乘以光的颜色,在用它加上作为之前原创 2022-02-09 19:54:56 · 1999 阅读 · 0 评论 -
玩转WebGL(六)漫反射光照
现实世界的光照是极其复杂的,因此WebGL的光照仅仅使用了简化的模型并基于对现实的估计来进行模拟,光照模型都是基于我们对光的物理特性的理解。颜色根据物理知识,不透明物体的颜色是根据其反射的色光决定的。比如树叶反射绿光,就显示绿色。如果物体反射所有的色光,就显示白色。所以光源色和物体颜色的反射运算:vec3 lightColor = vec3(0.3, 0.4, 0.5);vec3 thingColor = vec3(0.5, 0.4, 0.5);vec3 resultColor = lightCo原创 2022-02-09 19:53:33 · 596 阅读 · 0 评论 -
玩转WebGL(五)变换与坐标系统
1.变换为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识.1.1 向量向量有一个方向和大小.向量标量运算向量加减运算对应的直观表示加法:直观表示减法:向量长度使用勾股定理即可向量点乘两个向量的点乘也叫向量的内积、数量积,对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作两个向量的点乘等于它们的数乘结果乘以两个向量之间夹角的余弦值向量叉乘叉乘只在3D空间中有定义,它需要两个不平行向量作为输入,生成一个正交于两个输入向量的第三原创 2022-02-09 19:51:50 · 874 阅读 · 0 评论 -
玩转WebGL(四)缓冲区
1.缓冲区缓冲区是驻存于内存中的javascript对象,存储着即将推送到着色器中的attribute对象.最常用的attribute对象莫过于记录了空间中点位置信息的aVertexPosition了.缓冲区如同一个长长的队列,着色器每处理完一个顶点(或和顶点对应的其他attribute对象),缓冲区就提供下一个顶点给着色器处理.上节中,只绘制了一个点,这节来实现一个较为复杂的例子,用webgl来画一个正方形.可以通过4次每次画一个点,画4个点,然后将这4个点连起来就成为了一个正方形,此外如果我们要一次原创 2022-02-09 19:51:11 · 1533 阅读 · 0 评论 -
玩转WebGL(三)着色器
上节中,将着色器代码直接写在字符串里太麻烦了,不方便.所以要把它拆分出去.1.拆分在src下创建shader文件夹,新建Dot.vs和Dot.fs文件Dot.vs:void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // Set the vertex coordinates of the point gl_PointSize = 50.0; // Set the point size}原创 2022-01-21 14:47:24 · 500 阅读 · 0 评论 -
玩转WebGL(二)TypeScript开发环境搭建
1.安装安装好NodeJs和VsCode安装好TypeScript 执行npm i typescript -g2.初始化创建一个项目文件夹,执行命令生成package.jsonnpm init创建tsconfig.jsontsc --init创建项目子文件夹src 目录:存放项目ts源码lib 目录:存放库文件bin 目录:存放编译后的js3.初始化安装vscode插件Debugger for Chrome在.vscode文件夹下新增launch.json转载 2022-01-21 14:44:50 · 786 阅读 · 0 评论 -
玩转WebGL(一)介绍
WebGLWebGL(Web Graphics Library)是一种绘图标准,使用js绑定调用OpenGL ES的API,通过 HTML5 中 canvas元素实现功能.WebGL1.0版本对应的是OpenGL ES2.0,WebGL2.0版本对应的是OpenGL ES3.0.WebGl的着色语言是GLSL ES.OpenGL ESOpenGL ES(OpenGL for Embedded Systems)早期是作为一种为嵌入式设备而设计的图形编程API.由Khronos集团定义,Khronos是转载 2022-01-21 14:43:47 · 1538 阅读 · 0 评论