![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl
文章平均质量分 86
小秧@
专注于webgl, webgpu,three.js, cesium.js等web3d的前端开发工程师
展开
-
webgl点光源的漫反射
1.webgl点光源的漫反射点光源的特点:点光源照射到物体上的每个顶点的入射光方向是各不相同的。需要一个点光源的位置。需要一个点光源的光颜色。需要计算的是我们需要计算出每个顶点的入射光线的方向。点光源向四周放射光线,所以顶点处的光线方向是由点光源坐标 - 顶点坐标而得到得矢量入射光线的方向 = 点光源的坐标 - 顶点坐标顶点着色器中声明点光源的位置'uniform vec3 u_LightPosition;\n' + // 点光源的位置获取地址,并且赋值const u_Li原创 2022-01-11 00:18:45 · 4134 阅读 · 0 评论 -
webgl物体进行模型矩阵变化之后,计算变化之后的法向量
1.webgl物体进行模型矩阵变化之后,计算变化之后的法向量我们知道,webgl中我们使用模型矩阵,就可以对物体进行旋转,平移,缩放等变化操作。但是变化之后的物体的法线向量是发生变化的,物体的光照效果没有对应的发生改变。所以我们需要计算出变化之后的法线向量2.如何计算出变化之后的法线向量规则:用法向量乘以模型矩阵的逆转置矩阵,就是求得变化后的法向量。求逆转置矩阵的两个步骤:求原矩阵的逆矩阵将上一步的逆矩阵进行转置2.1Matrix4对象的方法Matrix4.setInverseOf(原创 2022-01-10 19:29:47 · 648 阅读 · 0 评论 -
webgl添加环境光示例
1.环境光环境光(间接光)是指那些光源发出后,被墙壁等物体多次反射,然后照到物体表面上的光。环境光从各个角度照射物体,其强度是一致的。比如说,在夜间打开冰箱的门,整个房间都会有些微微亮,这就是环境光的作用。环境光不用指定位置和方向。只需要指定颜色就可以了。2.环境光的反射特点:方向,环境光的反射方向是,和入射光的方向刚好相反。照射物体的方式都是各方向均匀,强度相等的。公式:环境光反射光的颜色 = 物体表面基底色 * 环境光的颜色3.漫反射,环境光反射同时存在时公式:表面的反射光颜色原创 2022-01-10 18:13:13 · 433 阅读 · 0 评论 -
webgl的平行光漫反射示例
1.webgl的平行光漫反射示例在现实生活中,我们看到物体是什么颜色,都是要通过光的反射进入我们眼睛我们才能看到物体是什么颜色。所以在webgl中我们要感受到光照明暗差异的效果,最终我们是通过改变每个顶点的颜色来实现的。2.反射光的颜色物体朝哪个方向反射光,反射光的颜色是什么?取决与:入射光的颜色, 入射光的方向, 物体的本身的颜色,物体反射特性,共四个参数来决定。而反射类型又分为: 漫反射,环境反射。漫反射光的颜色 = 物体表面基底色 * 入射光的颜色 * cosθ好了现在我们知道漫反射光原创 2022-01-10 03:43:57 · 1890 阅读 · 0 评论 -
webgl中,使用顶点索引
1.webgl中,使用顶点索引需要解决的是,减少数据,可以重复利用现有的数据1.创建顶点索引数据var indices = new Uint8Array([ 0, 1, 2, 0, 2, 3, // front 0, 3, 4, 0, 4, 5, // right 0, 5, 6, 0, 6, 1, // up 1, 6, 7, 1, 7, 2, /原创 2022-01-04 00:08:34 · 1371 阅读 · 0 评论 -
webgl中解决深度冲突-多边形偏移
1.webgl中解决深度冲突-多边形偏移1.什么是深度冲突?就是当几何图形或者物体的两个表面极为接近时,就会使得表面看上去斑斑点点,这种现象就是 深度冲突。看看这个缓冲区渲染出的效果缓冲区数据var verticesColors = new Float32Array([ // Vertex coordinates and color 0.0, 2.5, -5.0, 0.4, 1.0, 0.4, // The green triangle -2.5, -2.5,原创 2022-01-03 22:13:09 · 724 阅读 · 0 评论 -
webgl的隐藏面消除
1. webgl的隐藏面消除在将这个的时候,我想需要知道一个前提。webgl中使用缓冲区,来绘制图形时,是按照顺序来绘制的。webgl中绘制图形时,后绘制的图形会覆盖先绘制的图形。缓冲区的数据var verticesColors = new Float32Array([ 0.0, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one -0.5, -1.0, 0.0, 0.4, 0.4, 1.0, // 蓝色 z:原创 2022-01-03 01:43:34 · 530 阅读 · 0 评论 -
webgl的透视投影矩阵
1.将webgl的可视空间设置为透视投影矩阵2.什么是透视投影矩阵它能实现一种效果,近大远小的效果。因为我们用人眼去观察世界的效果,也是近大远小。使用cuon-matrix.js来创建一个透视投影矩阵。const projMatrix = new Matrix4(); // 创建一个4*4的矩阵projMatrix.setPerspective(30, canvas.width / canvas.height, 1, 1000); // 设置矩阵为透视投影矩阵垂直视角,及可视空间顶面 和原创 2022-01-03 00:34:17 · 636 阅读 · 0 评论 -
webgl,正射投影矩阵
1.正射投影矩阵正射投影矩阵,牵扯到六个参数left近裁剪面的 左边值top近裁剪面的 上边值right近裁剪面的 右边值bottom近裁剪面的 下边值near近边界点far远边界点会形成一个立方体的可见区域,在这个立方体的物体,才会绘制出来。如果物体有有一部分在可视区域立方体外面,一部分在立方体里面,那么就只会在可视区域(立方体)里面的那部分。所以我们会见到有些物体,被裁剪了,有缺失。其实是哪个物体的一部分超出了可视区范围。才会出现缺失。2.设置正射投影矩阵代码cons原创 2021-12-27 00:50:14 · 796 阅读 · 0 评论 -
webgl中的视图矩阵
1.什么是视图矩阵?视图矩阵: 简单理解就是观察者从哪里(位置)观察这个物体,有三个参数决定这个视图矩阵。视点,就是用户的位置,观察者的位置。观察目标,即被观察目标所在的位置。上方向,因为视点,观察目标决定了视线。但是观察者在视点处的位置,会是绕着视线旋转一定的角度,观察到的目标也会不一样。2.上方向的意义我们改变观察物体的角度1.要么是改变物体在三维场景中的位置2.要么是改变观察者的位置但是我们是改不了观察者的位置,所以我们就改变三维场景中的物体的位置。顶点着色器代码cons原创 2021-12-26 22:43:21 · 570 阅读 · 0 评论 -
webgl中实现根据顶点位置,来确定颜色
1.webgl中实现更加顶点位置,来确定颜色要实现这个功能的话,重点是gl_FragCoord该内置变量2.gl_FragCoord该内置变量的第一个分量,和第二个分量表示片元在<canvas></canvas>坐标系统中的坐标值。1.顶点着色器const VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + '原创 2021-12-18 21:07:01 · 325 阅读 · 0 评论 -
webgl的图形装配与光栅化
1.webgl的图形装配与光栅化这里讲述的内如是,《webgl编程指南》里的。在顶点着色器和片元着色器之间还有两个步骤图形装配过程,将孤立的顶点坐标装配成几何图形,几何图形的类别是有 gl.drawArrays()函数的第一个参数决定的。光栅化:将装配好的图形转换为图元.gl_Position实际上是几何图形装配阶段输入的数据,几何图形装配过程又称为图元装配过程,因为被装配的基本图形(点,线,面)又称为图元。执行顶点着色器,缓冲区对象的第一个顶点坐标,被传递给attribute变量a_P原创 2021-12-18 20:34:19 · 416 阅读 · 0 评论 -
webgl中顶点着色器的varying变量,使用方法。
1.webgl中顶点着色器的varying变量,使用方法。1.在webgl中我们在顶点着色器中使用varying声明了的变量2.那么只有在片源着色器张也使用varying声明了同种类型的变量了3.varying变量的作用是从顶点着色器向片元着色器传输数据。1.顶点着色器const VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+ 'attribute vec4 a_Color;\n'+ 'varyi原创 2021-12-18 17:56:24 · 581 阅读 · 0 评论 -
webgl中如何通过一个缓冲区,实现传递多种顶点数据.
1.webgl中如何通过一个缓冲区,实现传递多种顶点数据.这个要求是什么呢?一般我们创建一个缓冲区,都是对顶点坐标进行操作。如果我们要对每个顶点的尺寸也是一个缓冲区进行的赋值操作,那么我们一般又要创建一个缓冲区。如果我们又要对什么进行赋值的话,我们又又要创建一个新的缓冲区。 而我要讲的是入通过一个缓冲区,将顶点的不同信息一起传入赋值。如何完成上面的需求呢?首先你要会使用webgl的缓冲我们只需要改变 vertexAttribPointer这个API的某几个参数就可以了。如果你不知道 如何使原创 2021-12-14 01:42:46 · 1140 阅读 · 0 评论 -
webgl(3) -如何使用webgl的缓冲区,使其一次性的写入多条数据,渲染多条数据。
1. 如何使用webgl的缓冲区,使其一次性的写入多条数据,渲染多条数据。这个的实现需要发这几步走。1. 创建缓冲区2. 将已经创建的缓冲区绑定到WebGL系统中已经存在的 “目标”3. 向缓冲区传入(写入)数据4. 将缓冲区的数据分配给webgl中的变量(attribute);5. 开启attribute变量。2.创建缓冲区const vertexBuffer = gl.createBuffer()此时的webgl系统中的变化为3.将已经创建的缓冲区绑定到WebGL系统中已经存在原创 2021-11-28 03:18:45 · 594 阅读 · 0 评论