- 博客(64)
- 收藏
- 关注
RSS订阅原创 three.js实战-Sprite实现标签效果
按照Three.js官网的解释是：精灵是一个总是面朝着摄像机的平面，通常含有使用一个半透明的纹理。精灵不会投射任何阴影，即使设置了也将不会有任何效果。
2022-12-27 14:10:00
1406
3
原创 three.js实战 -自定义剪切器
这是我在github上看到大佬的一个作品，当时感觉很有意思，决定分享出来，不知道取这个名字是否正确，废话不多说看下面效果。demo里的知识点，我之前的文章都有涉及，webgl与图形学的内容，代码里我已经加了注释方面各位阅读理解，代码逻辑实际并不难
2022-12-08 11:39:05
553
原创 图形学-几何-曲线与曲面
当我们使用过多的控制点定义一条曲线时，曲线会变得比较平滑，并且不便控制。因此我们一般使用逐段的方式定义贝塞尔曲线。我们每次使用 4 个控制点。我们会把前两个点和后两个点各看作一个控制杆来控制整个曲线。这和 Photoshop 中的钢笔工具是一致的。如果两条分段曲线的起点和终点重合，那么称为 C0 连接；在上面的情况下，如果第一条曲线终点的切线和第二条曲线起点的切线一样，那么称为 C1 连接；在上面的情况下，如果这两个点的 n 阶导数相同，那么称为 Cn 连接。
2022-11-15 23:00:45
907
原创 图形学-几何-网格操作
我们会对模型的网格进行一些操作来达到我们使用的目的。基本的操作包括网格细分（Mesh Subdivision），网格简化（Mesh Simplify）以及网格正则化（Mesh Regularization）。本章将会对前两个操作进行讲解。网格正则化指的是将三角形的平面变成接近于正三角形的一种操作。
2022-11-14 22:53:39
683
原创 图形学 - 纹理的应用
（Environment Map）指的是环境中四面八方的情况。可以使用纹理来描述环境光的样子。我们假设环境光来自于无穷远处，没有深度意义。环境光纹理可以看作一个光滑镜面的球表面在环境中所记录的信息。
2022-11-08 11:24:11
468
原创 图形学-着色频率与渲染管线
根据不同的着色方式，有不同的着色频率，主要的着色频率分为三种——面着色，顶点着色和像素着色。主要的不同之处在于法线的选择方式不同。当几何体相对复杂，构造精细的时候，三种着色效果产生的结果不相上下。
2022-11-01 23:20:18
228
原创 图形学-着色(Blinn-Phong模型)
在计算机图形学中，着色指的是对于不同的物体应用不同的材质。我们知道，光的反射我们需要进行进行建模。一个简单的光学模型就是。基本的模型一般会有以下几个部分：漫反射，高光（镜面反射），环境光（在这里我们不考虑环境光反射，我们认为这是一个常量）。以上的方向向量都是单位向量。同时我们还需要定义物体表面的参数，例如颜色，亮度。当我们着色时，我们不考虑其他的物体遮挡，因此着色中没有阴影。
2022-10-31 22:53:37
881
原创 图形学-光栅化
将几何图形绘制到屏幕上的过程叫做光栅化，我们对屏幕的定义如下**光栅化（Rasterization）**指的是将物体绘制到屏幕上。**像素（Pixel）**是具有统一颜色的小方块，是由不同颜色组合而成的（例如 RGB）。
2022-10-25 23:02:09
1111
原创 three.js实战-shader实现antv L7城市扫光效果
上图我们可以看到一个个的光波从城市中心像远处扩散，光波略过的高楼与地面会呈现高亮的状态，并且根据光波的宽度(大圈的半径 - 小圈的半径)高亮还呈现出渐变的状态。在WebGL编程指南-27 逐片元处理点光源光照效果我们知道，点光源照射在物体上的明暗效果，是通过该片元到顶点距离跟顶点法线来决定的，那我们可以借此思路来实现，大致思路是一个不断变大的圆，这个圆分大圆与小圆，在大圆与小圆之间的片元呈高光效果我们借助three.js官网提供的一个例子画出城市，在此例子基础上实现扫光效果2. 给大楼添加纹理贴图3.
2022-10-24 15:44:27
3184
3
原创 图形学-(视图变换,投影变换)
在 3 维物体变到二维平面的过程中，我们需要规定好相机的位置。对于相机所做的变换就是视图变换（Viewing/Camera transformation）。我们需要对相机位置进行定义，对于一个相机我们要规定下面三个属性：根据相对运动我们可以知道，只要相机和被拍摄物体相对位置不变，那么拍摄出来的照片应当是一样的。我们可以通过对被拍摄物体做相同的变换来把相机变换到标准位置。相机的标准位置为将任意位置的相机移动到标准位置需要以下操作：平移变换的变换矩阵可以写作：旋转矩阵的写法比较麻烦。从 ̂𝑔 旋转到
2022-10-20 23:45:01
1749
原创 图形学-变换(平移矩阵，旋转矩阵，缩放矩阵，线性变换，仿射变换，齐次坐标)
是计算机图形学中非常重要的一部分。变换包含模型变换（Modeling transform）以及视图变换（View transform）。模型变换指的是变换模型（被拍摄物体）的位置，大小和角度；视图变换指的是变换照相机的位置和角度。从相对运动的角度来看，两种变换是可以相互转化的。
2022-10-19 23:07:55
13381
1
原创 图形学-向量基础与应用
向量指的是（Magnitude）和（Direction）量。在物理学中也称为矢量。向量的表示通常使用小写字母上面加上向右的箭头 → 表示，例如；或者使用粗体的小写字母表示，例如 a。向量具有平移不变形。向量只与大小和方向有关系，和向量的起点和终点没有关系。向量也只包含两个属性：大小和方向。对于空间中的两个点 𝐴 和 𝐵，从 𝐴 到 𝐵 的向量可以表示为 ⃖⃖⃖⃖⃗ 𝐴𝐵，计算方法为 ⃖⃖⃖⃖⃗ 𝐴𝐵 = 𝐵 − 𝐴。
2022-10-18 22:11:57
2261
原创 WebGL编程指南-31 HUD（平视显示器）实现
HUD是平视显示器(head up display) 的简称，最早用于飞机驾驶显示器上，将飞机的一些重要信息投影到前方的玻璃上，这样就不用低头看仪表盘了，在游戏中，也经常会在三维场景上叠加一些二维文本或二维图形信息。
2022-10-11 10:04:46
407
原创 WebGL编程指南-30 三维物体雾化效果，立方体雾化效果
如果雾化影子为1.0则表示该点完全没有被雾化，可以清晰的看到物体，如果为0.0则表示该点完全雾化，此处完全看不到物体，雾化因子的取值范围 0.0~1.0。在着色器中可以使用 clamp(x,minVal,maxVal) 将x限制在minVal和maxVal之间 该方法限制雾化因子范围。同样可以使用 mix(x,y,a) 返回x和y的线性混合，即x*(1-a)+y*a 该方法计算片元颜色，两者结合可以得到新的公式。在片元着色器中根据雾化因子计算片元的颜色，公式如下。
2022-10-10 23:02:35
458
原创 WebGL编程指南-28 利用层次模型实现机械臂模拟动画
绘制两个机械臂,通过↑ ↓ ← →分别控制上臂与下臂的rotation转角,当下臂旋转时上臂也会跟着旋转，上臂旋转时下臂则不会。
2022-10-09 15:46:01
449
原创 WebGL编程指南-27 逐片元处理点光源光照效果
如上图，图二为逐片元处理点光源的效果，与之前的demo效果相比，物体表面的光照效果更佳柔和、细腻。
2022-10-07 16:51:38
392
原创 WebGL编程指南-26 物体坐标变换时光照计算，立方体动画旋转时点光源计算处理
如上图，立方体旋转时点光源照射在指定的位置上的效果，照射点随着立方体旋转而变化，这个点看起来比周围更亮一些。
2022-10-06 23:42:08
270
2
原创 WebGL编程指南-24 同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
此效果是上一章绘制的立方体基础上，向Y轴方向平移一个单位，然后绕Z轴旋转30度。如上图，归纳一下物体坐标变换法向量变化的规律如下。
2022-10-03 23:37:21
353
原创 WebGL编程指南-23 光照原理、漫反射光计算、漫反射光照射下的立方体
如上，添加了漫反射光照射效果的立方体，最前面的面亮一些，顶上和右侧的面暗一些。
2022-09-30 20:02:45
551
原创 WebGL编程指南-20 三维视图对象前后关系的处理/隐藏面消除与深度冲突处理
如上，图二为隐藏面消除前的效果，图一为隐藏面消除后的效果，即通常希望看到的效果我们都知道在透视投影中，z值较小的会遮挡住z值大的，但是WebGL并不会做这种处理，实际上WebGL是通过顶点的顺序绘制的三角行，也就是说后，与z值无关,不过WebGL提供了一种解决方案，那就是隐藏面消除。
2022-09-27 17:59:41
426
原创 WebGL编程指南-18 正射投影
如上，通过上下键调整正投影矩阵参数far的值，通过左右键调整正投影矩阵near的值，重新设置可视空间，实现页面中的三角形消失与复现。
2022-09-26 10:19:55
341
原创 WebGL编程指南-17根据上下左右视线视点的移动
通过监听键盘事件，监听左右键改变视点所处的位置，同时调用clear(gl.COLOR_BUFFER_BIT)清空颜色缓冲区，在调用drawArrays重新绘制。
2022-09-22 15:53:42
93
原创 WebGL编程指南-16三维视图从指定视点观察变换后的图形/观察旋转后的三角
我们已经知道，如果你想让图形旋转，就可以用旋转矩阵乘以原始顶点坐标即如果想获得从视点出发看到旋转后图形的顶点坐标，那么用视图矩阵乘以旋转后顶点坐标即可有以上两个关系代入，得到在这里我们只特殊的指定是旋转操作，其实我们是可以同时进行旋转、缩放、平移的任何组合变换，我们这时把组合变换的矩阵称为 模型矩阵 ，把旋转矩阵替换为模型矩阵后，我们就可以得出从视点观察任何组合变换后的顶点坐标的表达式，即。
2022-09-22 15:33:28
86
原创 WebGL编程指南13-纹理贴图原理
为了更好的理解纹理坐标系与顶点坐标系映射关系，调整一下纹理坐标，更方便我们理解纹理是如何映射到几何体上的。
2022-09-19 11:07:04
1498
原创 WebGL编程指南12-通过片元着色器内置变量gl_FragCoord验证内插过程
【代码】WebGL编程指南12-通过片元着色器内置变量gl_FragCoord验证内插过程。
2022-09-15 22:40:31
528
原创 WebGL编程指南11-varying变量，图形装配与光栅化
之前已经学习了attribute变量和uniform变量，varying变量的声明与它们一样，也有格式要求：。例如varying vec4 v_Color。varying变量的主要作用是从顶点着色器向片元着色器传输数据2.2 图形装配和格栅化如上图， 图形装配 过程其实就是调用gl.drawArrays()函数的过程，通过图形装配过程，将图形的孤立的点装配成几何图形。而 光栅化 就是把装配好的图形转化为片元的过程，光栅化之后我们就能得到组成图形的所有片元。
2022-09-14 22:26:06
226
原创 WebGL编程指南10-通过组合变化绘制旋转三角形
这里要注意：因为使用requestAnimationFrame的本质实际上是把回调函数交给浏览器来执行，具体什么时候执行，浏览器来决定，当系统负载较大，FPS比较低，可能导致requestAnimationFrame执行偏晚，导致每一帧绘制的时间间隔较长，动画不平滑流畅，所以我们把旋转角度与时间关系起来成比例关系，请看如下代码。
2022-09-13 15:43:16
157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人