自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(30)
  • 资源 (1)
  • 收藏
  • 关注

原创 Three.js 实现隐身衣,隐身墙,等透明遮挡物

当渲染出来的虚拟物体放置在真实场景的墙或者其他遮挡物体之后时,依旧会在场景中显示出来,这种情况我们可以使用透明遮挡物来让虚拟物体被遮挡,但不遮挡相机拍摄到的背景图像。

2024-09-29 10:53:45 302

原创 纹理分辨率太大怎么处理

采样会引起走样,那如果我们不采样呢?

2024-03-21 18:33:00 1070

原创 双线性插值

先在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 652

原创 三角形重心坐标插值法 Interpolation Across Triangles: Barycentric Coordinates

三角形重心坐标插值法是一种在计算机图形学中常用的技术,它允许我们在三角形内部平滑地插值顶点的任何属性,如位置、纹理坐标、颜色、法线、深度和材质属性。这种方法基于重心坐标,这是由三角形的三个顶点定义的坐标系统。

2024-03-21 15:23:03 1423

原创 纹理映射 Texture Mapping

纹理就是一张图,这张图可以被任意地裁切,拉伸,压缩,然后可以贴在任意一个三维物体的表面的图。被任意地裁切,拉伸,压缩,然后可以贴在任意一个三维物体的表面就叫纹理映射。

2024-03-21 10:53:43 1016

原创 图形管线 Graphics Pipeline(实时渲染管线)

图形渲染管线是一个复杂的过程,它负责将3D场景转化为我们在屏幕上看到的2D图像

2024-03-20 22:19:03 1197

原创 着色频率 Shading Frequencies

让我们来观察思考下图:图中的三个球,首先他们拥有完全相同的顶点数据,这三个球的几何体是一模一样的,可以从球的边界看出来。那为什么他们渲染出来的效果完全不同呢?这就是我们要说的着色频率。。

2024-03-20 21:07:55 348

原创 布林冯反射模型 Blinn-Phong Reflection Model

漫反射是指当有一根光线打到到物体表面后向各个方向均匀反射的现像。这种向四面八方的反射使得物体表面看起来不光滑,从而产生了物体的哑光外观。那么我们要如何用程序将漫反射的现像模拟出来呢?生活中当光线照射到一个单色立方体的各个面上,每个面面呈现出来的明暗是不一样的。这是为什么呢?我们一起看下图中的例子,假如说光线是离散的,比如图中的光是由六根光线组成的。每根光线带有固定的能量。那么我们发现,当表面跟光线的入射方向是垂直的,那么这个面可以接受到这束光的所有能量。

2024-03-20 17:43:08 1246

原创 计算机图形学-漫反射(Diffuse Reflection)

漫反射是指当有一根光线打到到物体表面后向各个方向均匀反射的现像。这种向四面八方的反射使得物体表面看起来不光滑,从而产生了物体的哑光外观。

2024-03-20 16:21:35 393

原创 计算机图形学-着色 Shading

在计算机图形学课程中我们可以这么理解:对不同物体,应用不同材料的一个过程

2024-03-20 15:27:35 899

原创 渲染-深度缓冲 Z-Buffer

在每个样本(像素)存储当前最小z值

2024-03-19 20:46:34 734

原创 three.js中plane透明部分背后的物体变全透明的问题及解决方法

这就是我遇到的问题的原因,由于我设置了plane的transparent属性为true,three.js就会按照深度排序的规则,先渲染plane,然后再渲染plane背后的物体,但是由于plane已经写入了深度缓冲区,plane背后的物体就被忽略掉了,导致看起来像是全透明的。但是,当我把这个plane放到场景中,发现了一个奇怪的现象:plane透明的部分背后的其他物体变成了全透明的,就像是被plane遮挡住了一样。这样,plane就不会写入深度缓冲区,也就不会影响背后的物体的渲染,达到了我想要的效果。

2023-12-27 10:37:42 1670

原创 Three.js 解决深度冲突(Z-Fighting)

threejs中两个面距离很近,甚至重叠时会发生深度冲突问题,导致渲染闪烁错误,解决深度冲突的方法有以下几种:

2023-11-14 19:10:19 654

原创 three.js 设置正交相机位置和朝向

three.js 设置正交相机位置和朝向

2023-06-26 16:40:47 986

原创 threejs 物体重置锚点到物体中心

该方法可以用于因为通过曲线,点阵生成物体,如管线,车削物体后锚点被设置在原点处,需要将锚点设置到物体中间时使用

2023-04-11 11:39:05 520

原创 Three.js 更新了bufferGeometry,线,后交互不到解决办法

Three.js 更新了BufferGeometry后交互不到的问题原因是更新了bufferGeometry的Attributed后,BufferGeometry的形状大小发生了改变,但是,其用于交互判断的包围球没有被更新,所以还需要再执行 BufferGeometry.computeBoundingSphere() 方法更新改几何的包围球。

2023-04-01 12:49:54 506 1

原创 vue+element 文本过长省略,悬浮显示

vue+element 的一个自定义组件,当文本过长时用来截取显示部分内容,省略过长的部分,鼠标移入可查看完整内容

2023-03-30 16:59:02 1370

原创 计算机图形学-走样与反走样

抗锯齿方法MSAA:在原图像的一个像素区域内设置多个采样点,得到各个采样点的色值,再对他们加权平均归一(卷积操作),然后将得到的色值设置到屏幕对应的像素位置上。

2023-01-13 18:18:56 829 1

原创 计算机图形学-光栅化(三角形的离散化)

本节记录了显示器屏幕如何将一个场景变成一副图像并成像在屏幕上的简单过程。

2022-12-02 16:19:14 855

原创 计算机图形学-正交投影与透视投影

本节记录了在计算机图形学中光栅化过程的前置工作,即:将场景归一化涉及视图变换,模型变换,透视投影。

2022-11-25 17:46:10 4793

原创 计算机图形学入门-变换

变换是计算机图形学中最重要的基础之一。本节笔记记录了如何用矩阵描述和分析点的变换。

2022-11-21 16:25:04 712

原创 计算机图形学入门-线性代数复习

计算机图形学中更依赖线性代数,主要使用到:向量的点乘,叉乘,向量 x 矩阵描述变换:如向量的平移和旋转操作可以用向量乘矩阵来表示;

2022-11-18 18:34:12 545

原创 计算机图形学入门GAMES101课程笔记

计算机图形学(Computer Graphics,简称CG),其主要研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。

2022-11-16 10:36:25 354

原创 常用动画缓动函数js

常用缓动函数,JavaScript实现

2022-10-27 14:56:32 1155

原创 小程序使用THREE.CanvasTexture真机贴图异常的问题处理

用Uint8Array规避小程序真机纹理贴图变黑问题

2022-08-03 17:39:45 574

原创 卡尔曼滤波算法的应用JavaScript实现案例

卡尔曼滤波的应用JavaScript实例

2022-06-15 18:07:29 1257

原创 基于requestAnimationFrame的动画控制器

最近学习threejs了解到了一个window的api:requestAnimationFrame,于是封装了一个控制器类,用来控制和实现自定义的动画效果。window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行回调函数会被传入DOMHighResTimeStamp参数,DOMHighResTimeStamp指示当前被reques..

2022-05-24 14:07:31 182

原创 Dijkstra 地图导航查找最短路径算法,临接表 JavaScript实现

dijkstra 最短路径-临接表算法 JavaScript实现

2022-05-20 17:48:38 1088

转载 THREE 线的相关

three js 线及管道

2022-04-15 10:21:27 141

原创 three.js DragControls +TransformControls 实现沿轴线拖拽功能

three.js 实现沿轴线拖拽功能

2022-04-07 16:31:29 1822

GAMES101作业1.zip

GAMES101作业1,已完成提高题。

2022-11-25

小程序使用的threejs144版本,可导入GLTF模型文件

该文件基于https://github.com/yannliao/threejs.miniprogram项目修改而来,修改了其中fork的旧版本threejs为新版的144版本threejs。小程序基于此可使用144版本three.js, 源文件在src下,混淆后的文件在dist文件夹下。 使用请参考 https://github.com/yannliao/threejs-example-for-miniprogram import * as THREE from '../../utils/threejs/js/three.module' wx.createSelectorQuery().in(this).select('#myCanvas').node().exec((res) => { let canvasId = res[0].node._canvasId const canvas = THREE.global.registerCanvas(canvasId, res[0].node) })

2022-08-10

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除