摘要：
这里总结下几种WebGL中实现遮罩的方法。 模板缓冲 模板缓冲可以实现渲染剔除，但是我们之前的学习里，剔除范围是基于上一次渲染的结果，且上一次的渲染也会进行显示，这样的话并不适合用来实现遮罩。 我们想实现遮罩的话，是希望只绘制模板缓冲而不绘制颜色缓冲。 想要实现这样的效果，可以借助 colorMas 阅读全文
随笔分类 - WebGL
WebGL学习笔记（十五）：模板缓冲
2019-11-17 16:00 by 阿诚de窝, 1966 阅读, 收藏, 编辑
摘要：
可以用来干啥？ 模板缓冲一般用来实现一些地面反射投影和类似镜子的特殊效果，如下： 开启模板缓冲 默认情况下，模板缓冲是关闭的，模板缓冲如果处于关闭状态，运行模板相关的代码不会报错，但是不会出现预期的效果。 使用下面的代码可以开启模板缓冲： 使用流程 模板缓冲可以确定下次渲染时，指定的像素是否要进行剔 阅读全文
WebGL学习笔记（十四）：一些零碎的记录
2019-09-06 12:15 by 阿诚de窝, 696 阅读, 收藏, 编辑
摘要：
HUD和Billboard 这两个名词都指向同一种东西，即始终面向摄像机的面片，该技术在游戏中大量使用，比如UI的绘制、模型头顶的名称和血条等等都需要使用到。 交换缓冲区 在PC上使用的OpenGL开发时，会存在两个缓冲，前台缓冲和后台缓冲，其中前台缓冲用来显示屏幕上的图像，后台缓冲则是用来绘制的， 阅读全文
WebGL学习笔记（十三）：拾取
2019-09-06 12:13 by 阿诚de窝, 954 阅读, 收藏, 编辑
摘要：
目前为止，我们还没有涉及到交互相关的内容，实际上，我们是需要知道我们点击的地方下面的第一个物体的信息，这个过程称为拾取。 简单拾取实现 我们可以通过颜色来获取是否成功点击，具体方式如下： 示例请点击：https://hammerc.github.io/dou3d-ts/learning/learni 阅读全文
WebGL学习笔记（十二）：加载模型文件
2019-09-06 12:10 by 阿诚de窝, 1664 阅读, 收藏, 编辑
摘要：
目前为止，我们用到的模型顶点uv信息等，都是直接定义在代码中的，实际使用中，这些数据应该是由3D编辑器编辑好后按照一定的格式存储在文件中的，我们需要从文件中提取出对应的数据之后，组合成我们可以使用的信息来使用。 OBJ格式 3D模型文件格式有许多种，我们这里只看 OBJ 格式的模型文件，这是一种纯文 阅读全文
WebGL学习笔记（十一）：混合和透明
2019-09-06 12:09 by 阿诚de窝, 2821 阅读, 收藏, 编辑
摘要：
到目前为止我们绘制了不少模型，用到了不少颜色，颜色中有四个分量（RGBA），其中的A分量表示透明度，这个分量目前为止我们还没有真正的用到； A分量，表示的是当前的透明度，如果设定为 0.5 就会半透明，可以看到半透明的模型，也可以看见模型后面的东西； 开启混合 要实现透明，需要开启混合，会使用到下面 阅读全文
WebGL学习笔记（十）：雾化
2019-09-06 12:06 by 阿诚de窝, 693 阅读, 收藏, 编辑
摘要：
雾化是指距离我们较远的物体看不清晰的情况，比如模拟大雾环境，或者模拟水下环境时会用到。 实现雾化的方式有很多种，我们这里使用的是线性雾化的方式； 线性雾化 线性雾化比较简单，我们算出每个像素点到摄像机的距离之后，就可以确定当前像素的雾化因子，用雾化因子就可以算出新的颜色值； 示例点击这里：https 阅读全文
WebGL学习笔记（九）：阴影
2019-09-06 12:05 by 阿诚de窝, 896 阅读, 收藏, 编辑
摘要：
3D中实现实时阴影技术中比较常见的方式是阴影映射(Shadow Mapping)，我们这里也以这种技术来实现实时阴影。 阴影映射背后的思路非常简单：我们先以光的位置为视角进行渲染，我们能看到的东西都将被点亮，看不见的一定是在阴影之中了（这里会将是否可视的信息作为深度贴图进行渲染）。假设有一个地板，在 阅读全文
WebGL学习笔记（八）：光照
2019-09-02 12:08 by 阿诚de窝, 994 阅读, 收藏, 编辑
摘要：
局部光照与全局光照 局部光照 只考虑光源到模型表面的照射效果，运算量较小； 全局光照 考虑到环境中所有表面和光源相互作用的照射效果，即让没有直接受光照射的位置也会受周围反射光的影响，运算量较大； Phong反射模型 Phong光照模型是真实图形学中提出的第一个有影响的光照明模型，该模型只考虑物体对直 阅读全文
WebGL学习笔记（六）：纹理贴图
2019-08-21 21:22 by 阿诚de窝, 2415 阅读, 收藏, 编辑
摘要：
只可以绘制纯色的模型是不够的，为了呈现出更真实的模型，我们还需要通过纹理贴图给模型进行上色。 丢失上下文 GPU作为一种公用资源，是会被多个进程同时使用的，在资源不足的情况下（比如PC或手机系统进入休眠状态前或被唤醒后），我们持有的上下文会出现丢失的情况，为了保证程序运行的健壮性，我们必须在丢失上下 阅读全文
WebGL学习笔记（七）：输入和动画
2019-08-21 21:22 by 阿诚de窝, 368 阅读, 收藏, 编辑
摘要：
目前为止，我们绘制出来的3D物体都是静止的，接下来我们需要让桌面上的小盒子可以根据我们按键（上下键）前进后退； 输入方面，监听按键和鼠标消息直接在document上添加对应的监听就行了； 动画这块，我们引入了webgl-utils.js类库，其中的方法requestAnimFrame可以按60帧的帧 阅读全文
WebGL学习笔记（五）：变换库
2019-08-01 15:32 by 阿诚de窝, 1437 阅读, 收藏, 编辑
摘要：
在WebGL开始绘制之前，我们需要通过自己对3D空间进行矩阵和向量的运算，使用网上已经成熟的转换库，可以避免自己去实现这些复杂的数学运算。 我们这里选择的是gl-matrix库，下载地址：https://github.com/toji/gl-matrix 变换运算 在最终开始绘制之前，我们需要把3D 阅读全文
WebGL学习笔记（四）：绘图
2019-07-26 12:11 by 阿诚de窝, 1981 阅读, 收藏, 编辑
摘要：
图元 WebGL可以绘制非常复杂的3D模型，这些模型都是由下面3种基本几何图元构成的，下面我们来详细的看看。 三角形 WebGL中任何复杂的模型，都是由三角形组合而成的，可以说三角形是任意形状的最小构成单位。 WebGL可以绘制下面几种三角形： 独立的三角形（gl.TRIANGLES） 指定3*n个 阅读全文
WebGL学习笔记（三）：绘制一个三角形
2019-07-17 14:51 by 阿诚de窝, 940 阅读, 收藏, 编辑
摘要：
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窝, 3418 阅读, 收藏, 编辑
摘要：
WebGL使用的是正交右手坐标系，且每个方向都有可使用的值的区间，超出该矩形区间的图像不会绘制： x轴最左边为-1，最右边为1； y轴最下边为-1，最上边为1； z轴朝向你的方向最大值为1，远离你的方向最大值为-1； 注：这些值与Canvas的尺寸无关，无论Canvas的长宽比是多少，WebGL的区 阅读全文
WebGL调试工具分享
2019-07-17 11:09 by 阿诚de窝, 8001 阅读, 收藏, 编辑
摘要：
学习WebGL，我们需要一些好用的调试工具，下面分享3个常用的调试工具。 WebGL Inspector 下载地址：https://github.com/benvanik/WebGL-Inspector Clone或下载好该项目之后，先执行core/buildextensions.sh，执行好之后， 阅读全文
WebGL学习笔记（一）：理解基本概念和渲染管线
2019-07-15 18:35 by 阿诚de窝, 2920 阅读, 收藏, 编辑
摘要：
WebGL 是以 OpenGL ES 2.0 为基础的 3D 编程应用接口。 渲染管线（图形流水线） 渲染管线是指将数据从3D场景转换成2D图像，最终在屏幕上显示出来的总过程。它分为几个阶段：应用阶段、几何阶段和光栅阶段，关于这3个阶段的详细介绍可以点这里查看。 下面我们来仔细看看 WebGL 中的 阅读全文
