- 博客(30)
- 资源 (1)
- 收藏
- 关注
原创 Three.js 实现隐身衣,隐身墙,等透明遮挡物
当渲染出来的虚拟物体放置在真实场景的墙或者其他遮挡物体之后时,依旧会在场景中显示出来,这种情况我们可以使用透明遮挡物来让虚拟物体被遮挡,但不遮挡相机拍摄到的背景图像。
2024-09-29 10:53:45
515
原创 双线性插值
先在u_00和u_10之间做一次线性插值,得到一个值u_0。u0 = lerp(s, u00, u10)再在u_01和u_11之间做一次线性插值,得到一个值u_1。u1 = lerp(s, u01, u11)得到两个水平的插值后。只需要再使用u_0和u_1和竖直距离t做一次竖直方向上的插值
2024-03-21 16:27:02
711
原创 三角形重心坐标插值法 Interpolation Across Triangles: Barycentric Coordinates
三角形重心坐标插值法是一种在计算机图形学中常用的技术,它允许我们在三角形内部平滑地插值顶点的任何属性,如位置、纹理坐标、颜色、法线、深度和材质属性。这种方法基于重心坐标,这是由三角形的三个顶点定义的坐标系统。
2024-03-21 15:23:03
2247
原创 纹理映射 Texture Mapping
纹理就是一张图,这张图可以被任意地裁切,拉伸,压缩,然后可以贴在任意一个三维物体的表面的图。被任意地裁切,拉伸,压缩,然后可以贴在任意一个三维物体的表面就叫纹理映射。
2024-03-21 10:53:43
1120
原创 着色频率 Shading Frequencies
让我们来观察思考下图:图中的三个球,首先他们拥有完全相同的顶点数据,这三个球的几何体是一模一样的,可以从球的边界看出来。那为什么他们渲染出来的效果完全不同呢?这就是我们要说的着色频率。。
2024-03-20 21:07:55
398
原创 布林冯反射模型 Blinn-Phong Reflection Model
漫反射是指当有一根光线打到到物体表面后向各个方向均匀反射的现像。这种向四面八方的反射使得物体表面看起来不光滑,从而产生了物体的哑光外观。那么我们要如何用程序将漫反射的现像模拟出来呢?生活中当光线照射到一个单色立方体的各个面上,每个面面呈现出来的明暗是不一样的。这是为什么呢?我们一起看下图中的例子,假如说光线是离散的,比如图中的光是由六根光线组成的。每根光线带有固定的能量。那么我们发现,当表面跟光线的入射方向是垂直的,那么这个面可以接受到这束光的所有能量。
2024-03-20 17:43:08
1439
原创 计算机图形学-漫反射(Diffuse Reflection)
漫反射是指当有一根光线打到到物体表面后向各个方向均匀反射的现像。这种向四面八方的反射使得物体表面看起来不光滑,从而产生了物体的哑光外观。
2024-03-20 16:21:35
598
原创 three.js中plane透明部分背后的物体变全透明的问题及解决方法
这就是我遇到的问题的原因,由于我设置了plane的transparent属性为true,three.js就会按照深度排序的规则,先渲染plane,然后再渲染plane背后的物体,但是由于plane已经写入了深度缓冲区,plane背后的物体就被忽略掉了,导致看起来像是全透明的。但是,当我把这个plane放到场景中,发现了一个奇怪的现象:plane透明的部分背后的其他物体变成了全透明的,就像是被plane遮挡住了一样。这样,plane就不会写入深度缓冲区,也就不会影响背后的物体的渲染,达到了我想要的效果。
2023-12-27 10:37:42
2017
原创 Three.js 解决深度冲突(Z-Fighting)
threejs中两个面距离很近,甚至重叠时会发生深度冲突问题,导致渲染闪烁错误,解决深度冲突的方法有以下几种:
2023-11-14 19:10:19
948
原创 threejs 物体重置锚点到物体中心
该方法可以用于因为通过曲线,点阵生成物体,如管线,车削物体后锚点被设置在原点处,需要将锚点设置到物体中间时使用
2023-04-11 11:39:05
656
原创 Three.js 更新了bufferGeometry,线,后交互不到解决办法
Three.js 更新了BufferGeometry后交互不到的问题原因是更新了bufferGeometry的Attributed后,BufferGeometry的形状大小发生了改变,但是,其用于交互判断的包围球没有被更新,所以还需要再执行 BufferGeometry.computeBoundingSphere() 方法更新改几何的包围球。
2023-04-01 12:49:54
600
1
原创 vue+element 文本过长省略,悬浮显示
vue+element 的一个自定义组件,当文本过长时用来截取显示部分内容,省略过长的部分,鼠标移入可查看完整内容
2023-03-30 16:59:02
1487
原创 计算机图形学-走样与反走样
抗锯齿方法MSAA:在原图像的一个像素区域内设置多个采样点,得到各个采样点的色值,再对他们加权平均归一(卷积操作),然后将得到的色值设置到屏幕对应的像素位置上。
2023-01-13 18:18:56
1021
1
原创 计算机图形学入门-线性代数复习
计算机图形学中更依赖线性代数,主要使用到:向量的点乘,叉乘,向量 x 矩阵描述变换:如向量的平移和旋转操作可以用向量乘矩阵来表示;
2022-11-18 18:34:12
594
原创 计算机图形学入门GAMES101课程笔记
计算机图形学(Computer Graphics,简称CG),其主要研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。
2022-11-16 10:36:25
435
原创 基于requestAnimationFrame的动画控制器
最近学习threejs了解到了一个window的api:requestAnimationFrame,于是封装了一个控制器类,用来控制和实现自定义的动画效果。window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行回调函数会被传入DOMHighResTimeStamp参数,DOMHighResTimeStamp指示当前被reques..
2022-05-24 14:07:31
216
小程序使用的threejs144版本,可导入GLTF模型文件
2022-08-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人