摘要:雾化是指距离我们较远的物体看不清晰的情况,比如模拟大雾环境,或者模拟水下环境时会用到。 实现雾化的方式有很多种,我们这里使用的是线性雾化的方式; 线性雾化 线性雾化比较简单,我们算出每个像素点到摄像机的距离之后,就可以确定当前像素的雾化因子,用雾化因子就可以算出新的颜色值; 示例点击这里:https 阅读全文
WebGL学习笔记(九):阴影
2019-09-06 12:05 by 阿诚de窝, 829 阅读, 1 推荐, 收藏, 编辑
摘要:3D中实现实时阴影技术中比较常见的方式是阴影映射(Shadow Mapping),我们这里也以这种技术来实现实时阴影。 阴影映射背后的思路非常简单:我们先以光的位置为视角进行渲染,我们能看到的东西都将被点亮,看不见的一定是在阴影之中了(这里会将是否可视的信息作为深度贴图进行渲染)。假设有一个地板,在 阅读全文
WebGL学习笔记(八):光照
2019-09-02 12:08 by 阿诚de窝, 918 阅读, 0 推荐, 收藏, 编辑
摘要:局部光照与全局光照 局部光照 只考虑光源到模型表面的照射效果,运算量较小; 全局光照 考虑到环境中所有表面和光源相互作用的照射效果,即让没有直接受光照射的位置也会受周围反射光的影响,运算量较大; Phong反射模型 Phong光照模型是真实图形学中提出的第一个有影响的光照明模型,该模型只考虑物体对直 阅读全文
WebGL学习笔记(六):纹理贴图
2019-08-21 21:22 by 阿诚de窝, 2250 阅读, 1 推荐, 收藏, 编辑
摘要:只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色。 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休眠状态前或被唤醒后),我们持有的上下文会出现丢失的情况,为了保证程序运行的健壮性,我们必须在丢失上下 阅读全文
WebGL学习笔记(七):输入和动画
2019-08-21 21:22 by 阿诚de窝, 368 阅读, 1 推荐, 收藏, 编辑
摘要:目前为止,我们绘制出来的3D物体都是静止的,接下来我们需要让桌面上的小盒子可以根据我们按键(上下键)前进后退; 输入方面,监听按键和鼠标消息直接在document上添加对应的监听就行了; 动画这块,我们引入了webgl-utils.js类库,其中的方法requestAnimFrame可以按60帧的帧 阅读全文
WebGL学习笔记(五):变换库
2019-08-01 15:32 by 阿诚de窝, 1325 阅读, 0 推荐, 收藏, 编辑
摘要:在WebGL开始绘制之前,我们需要通过自己对3D空间进行矩阵和向量的运算,使用网上已经成熟的转换库,可以避免自己去实现这些复杂的数学运算。 我们这里选择的是gl-matrix库,下载地址:https://github.com/toji/gl-matrix 变换运算 在最终开始绘制之前,我们需要把3D 阅读全文
关于H5项目开发中TS(或JS)文件按照顺序编译成一个文件的记录
2019-07-29 19:29 by 阿诚de窝, 2255 阅读, 0 推荐, 收藏, 编辑
摘要:由于js的执行特性,多个js文件合成一个文件或者进行多个js文件加载时,时需要按照指定的顺序进行的,否则会出现报错的情况。 我们看一下目前几个主流H5引擎的做法。 白鹭的做法 当前版本的做法 在tsconfig.json中,使用的是outDir而不是outFile,这么设置ts只会讲单个的ts文件直 阅读全文
WebGL学习笔记(四):绘图
2019-07-26 12:11 by 阿诚de窝, 1893 阅读, 0 推荐, 收藏, 编辑
摘要:图元 WebGL可以绘制非常复杂的3D模型,这些模型都是由下面3种基本几何图元构成的,下面我们来详细的看看。 三角形 WebGL中任何复杂的模型,都是由三角形组合而成的,可以说三角形是任意形状的最小构成单位。 WebGL可以绘制下面几种三角形: 独立的三角形(gl.TRIANGLES) 指定3*n个 阅读全文
WebGL学习笔记(三):绘制一个三角形
2019-07-17 14:51 by 阿诚de窝, 923 阅读, 0 推荐, 收藏, 编辑
摘要:1 2 3 4 5 6 7 8 WebGL 9 10 11 19 20 21 30 31 161 162 163 164 165 166 167 阅读全文
WebGL学习笔记(二):WebGL坐标系及基础几何概念
2019-07-17 13:36 by 阿诚de窝, 3355 阅读, 0 推荐, 收藏, 编辑
摘要:WebGL使用的是正交右手坐标系,且每个方向都有可使用的值的区间,超出该矩形区间的图像不会绘制: x轴最左边为-1,最右边为1; y轴最下边为-1,最上边为1; z轴朝向你的方向最大值为1,远离你的方向最大值为-1; 注:这些值与Canvas的尺寸无关,无论Canvas的长宽比是多少,WebGL的区 阅读全文