- 博客(99)
- 收藏
- 关注
RSS订阅原创 three.js中使用CameraHelper来可视化调整阴影相机的范围
有时候我们很难，调整好这个对应的数值，不过现在可以通过。，过小阴影会导致不显示或者不完整，来可视化调整这个阴影相机了。
2024-05-26 22:21:04
407
原创 使用向量叉乘，来计算一个点到一条线的距离
所以我们直接将两个向量叉乘就可以，然后再计算他的模，再除以 2 ，再除以 底边的长度就可以了。这样就可以了，所以最重要的就是怎么算出这个三个点组成的三角形的面积了。我们可以把，这三个点连接起来，得到一个三角形，此时的步骤就是这样的。如果说一条线段的两个端点坐标分别是，
2024-05-26 21:41:10
367
原创 THREE.JS中的向量点乘，以及他的几何意义。
从这里可以看出，向量的点乘的结果是一个数字(标量)。，所以在计算的时候，我们要保持这两个向量保持在一个方向上，及。
2024-05-26 16:18:25
243
原创 THREE.JS中使用四元数表示两个向量旋转
这个时候就可以使用 四元数的setFromUnitVectors方法，就可以使用这个效果了。方法，就可以得到从一个向量向另一个向量的旋转的四元数了。在three.js中，我们可以使用四元数的。我们向让他改变成，朝着。就完成了，这个效果了。
2024-05-17 15:43:33
330
2
原创 three.js 效果细节提升
envMapIntensity属性的值是一个0到1之间的浮点数，用于设置环境贴图的强度。当值为1时，环境贴图的效果最强，模型反射的亮度最高。而当值为0时，环境贴图的效果被完全消除，模型的表面不再反射周围环境。
2024-05-08 00:33:03
547
1
原创 three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析
他会对alphaMap 纹理进行，采样然后获取他的一个 g 值，来表示一个 强度；如果这个强度值，小于 alphaTest，那么这个就会把删除掉。裁剪空间, 就是将不要的空间外的片源删除掉。在 alphatest 纹理进行处理。对片源进行对数缓冲区计算。
2024-05-05 01:49:42
450
原创 three.js 中ShaderChunk的 uv_pars_vertex.glsl
【代码】three.js 中ShaderChunk的 uv_pars_vertex.glsl。
2024-05-05 00:11:40
210
原创 three.js 中ShaderChunk的, common.glsl 介绍
但是three.js他也通过了一些 shader 代码片段，哎我们可以通过引入这些 shader代码片段，在自己的 THREE.ShaderMaterial中哈哈哈。在three.js中，我们可以编写底层的shader代码，是通过 THREE.ShaderMaterial 来进行的。从这可以看出来，是什么，他声明了 PI, PI2, PI_HALF, RECIPROCAL_PI,…现在我们讲一下，这个common.glsl 文件是干嘛的。这个变量的含义就是，圆周率，2Π，1/2 Π …
2024-05-04 23:50:31
272
原创 my-room-in-3d中的电脑，电视，桌面光带发光原理
我们会发现，这个高光纹理，他的颜色就三种颜色，分别是：r(红色), g(绿色), b(蓝色)最后我们发现，他这么做的原因，是因为他这样可以获取到，需要高光处的片源的的位置信息。最近在github中，看到了这样的一个项目；我看到的时候，蛮好奇他这个光带时怎么做的。好，我们来看看这个纹理和普通纹理有什么区别。知道了这些，这个高光效果就很简单了。最后发现，他是通过，加载一个。这个就是最核心的代码。
2024-05-04 22:22:38
967
原创 手写一个简单的 OrbitControls 轨道控制器
相信使用过THREE.JS的同学，都知道 OrbitControls 这个的轨道控制器，他是绕着一个观察点，来进行什么什么的… 反正就是那么个意思。所以很明显的运动轨迹是一个球体，他是绕着球体进行运动的。所以也很明显，我们只有知道每一点，球体的坐标 (x, y, z) 就可以实现这个效果，然后再把这个坐标，赋值给 相机对象就可以实现了。
2024-04-13 00:18:17
304
原创 WebGPU Inter-stage 变量
这是在顶点着色器和片段着色器之间增加 Inter-stage 变量的一种简便方法。然后，我们不再只返回一个表示位置的vec4f，而是声明一个结构体的实例，填充并返回它。在片段着色器重，我们声明将其中一个结构体作为参数的函数。然后，我们声明顶点着色器将返回该类型的结构体。变量在顶点着色器和片段着色器之间发挥作用。我们创建一个有3种颜色的数组。这里我们声明了一个结构体。
2024-02-07 18:00:54
373
原创 Cesium 性能优化 - 学习笔记
获取或设置呈现分辨率的比例因子。小于 1.0 的值可以提高功能较弱的设备的性能，而大于 1.0 的值将以更高的分辨率呈现，然后按比例缩小，从而提高视觉保真度。例如，如果构件的布局大小为 640x480，则将此值设置为 0.5 将导致场景以 320x240 渲染，然后在将其设置为 2.0 时放大将导致场景以 1280x960 渲染，然后按比例缩小。图上渲染内容多的时候，我的cpu会疯狂的转，声音特别大，在测试提高帧率的时候，发现了参数requestRenderMode；
2023-11-30 17:32:12
1594
原创 Cesium 中对entities的查询，删除操作
这里要传入一个ID，这个ID就是我们在创建 entities 时的ID。在Cesium 中我们如何对entities进行查询，和删除操作。
2023-11-29 17:28:38
673
原创 Cesium中对Cesium.Cesium3DTileset模型进行偏移
但是很多时候，我们添加的3D Tiles 模型他的位置，并不是我们想要的位置。由于单个瓦片的位置信息是写到了数据中的(.b3dm 和对应的 json 文件中), 如果能整体调整加载后的 Tileset，就是最好的选择。3DTiles 数据集以分块，分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的渲染压力。这里面说，一个三维场景中，要包含：视图矩阵，投影矩阵，模型矩阵。模型矩阵: 就包含了，这个模型的各种变换，平移，旋转，缩放。这三个矩阵也有统称为: MVP矩阵。
2023-11-29 14:38:24
1178
原创 postprocessing 的 SelectiveBloomEffect 泛光效果
初始化SelectiveBloomEffect。添加renderPass。
2023-08-07 17:22:16
244
2
原创 postprocessing 的 GodRaysEffect 的使用
GodRaysEffect 的后期效果需要一个物体，就是确定那个物体发光。初始化 GodRaysEffect。添加renderPass。
2023-08-07 15:41:58
107
原创 THREE.JS合并物体工具提升渲染性能
three.js 中 BufferGeometryUtils.mergeBufferGeometries可以实现，渲染大量的具有相同材质，但可以几何体不同的的网格。创建10000个TorusKnot几何体，然后将他添加到 geometries 数组中。将这10000个网格进行合并。例如渲染10000个网格。
2023-05-21 01:51:35
704
2
原创 three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格
在three.js中有时候我们需要渲染大量的相同几何体，材质的网格，但是如果用一般的方法来实现的花，通常性能不佳，卡顿。但是如果我们使用InstancedMesh来渲染的话，会大大的解决卡顿，性能更佳。例如我们创建1000个立方体，添加到场景中。这样的方法渲染器会调用很多次。
2023-05-21 00:53:29
1172
2
原创 three.js中使用shaderPass实现自定义合成效果
纹理采样，他是将原本渲染的画面进行纹理采样vec4 color = texture2D(tDiffuse, vUv);来还原当前默认的画面是怎么样的；但是有时候，有些效果没有现成的，这个时候可能需要我们去编写shader来实现这个效果，而在合成效果中编写shader是通过shaderPass来实现。在three.js中提供了许多的合成效果，例如ClearPass，CubeTexturePass，BloomPass…此时如果我们想再往上添加什么效果，都是在color上添加，例如。
2023-05-20 22:33:09
664
原创 three.js 添加合成效果 EffectComposer
添加我们自己想要的效果, DotScreenPass。three.js中提供了很多的合成效果。这样的效果是使用合成效果实现，此时我们需要改变渲染方式。
2023-05-20 18:18:31
180
原创 cesium中如何添加自定义材质，编写shader
cesium中提供了接口，让我们开发者在cesium中编写底层的shader着色器代码，达到一些酷炫的效果fabric : {} ` } })最简单的模板就是这样，source是glsl的源代码，这里定义了一个函数czm_getMaterial，在后续的代码中会调用这个czm_getMaterial函数，这个函数返回了一个材质，我们只有将这个material，的一些属性进行修改即可。例如:diffusealpha至于这些属性表示什么意思，需要查看cesium对这块的文档说明。
2023-05-20 01:37:41
2103
1
原创 cesium中如何修改图层的着色器，使其达到我们想要的图层风格
这里面的字符串是glsl代码，我们使用字符串的replace函数来替换掉我们想替换的代码。在cesium中我们可以，通过修改图层的着色器源代码使其达到一些酷炫的效果，现在我们。好现在 baseFragmentShader里面就是图层的着色器代码。这样就做到了，修改glsl代码的效果。这样就可以达到一些自定义的图层效果。获取图层对应的片源着色器源代码。来说说如何做到这一切。
2023-05-20 01:16:09
923
3
原创 如何在THREE.JS 中编写shader
我们只需要在vertexShader，fragmentShader提供响应的着色器代码即可，至于怎么编写这个着色器代码，完全由开发者自己决定。要在three.js中编写底层着色器，我们需要借助 THREE.ShaderMaterial来实现。
2023-05-18 12:01:28
282
原创 glsl着色器编写随机函数
在glsl中好像没有默认的随机函数，所以一般都需要我们自己去定义，去实现这个随机函数。所以我们最终的随机函数是这样的。
2023-05-17 22:14:16
419
原创 uniapp，app端时input组件弹起系统键盘时，键盘会顶住页面导致页面会上移
App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异。配置方式，在 pages.json 中配置 style。这个时候，我们可以修改键盘的弹出模式。
2023-04-06 10:45:15
1910
1
原创 go 中引入自定义包，报错 invalid import path
系统环境变量中的 $GOPATH变量对应的值自己要导入包的路径而我们在导入包的时候其实最后是拼接成所以最后我们最好是在 $GOPATH这个环境变量对应的值的路径的 SRC 目录创建我们的项目。
2022-11-08 00:06:38
3345
2
原创 Vite打包 - 打包体积可视化面板
其次在 vite.config.js中配置，和使用这个插件。最后运行打包命令，之后在浏览器就显示对应的可视化面板。首先我们下载对应的插件。
2022-10-18 23:21:11
998
2
原创 Vite基础配置之 - 分包
比如说，我使用了 loadsh.js 的东西，那么我们在打包的时候，就会把 loadsh 相关资源也会打包进来，这个是没有问题的，此时是将 loadsh 的东西 与 我们自己写的相关代码合成一个文件，记住是一个文件。而且，这个文件的名字，每一次都会发生变化的(源代码发生变化)，所以当用户去访问我们的页面时，请求的资源文件内容有 : 第三方资源包代码 + 自己的业务代码，而真正需要跟新的只有 自己的业务代码，所以我们进行分包，在vite.config.js中的。还是举个例子，来回忆一下吧，什么呢？
2022-10-18 23:06:07
4444
1
原创 《Vue设计与实现》第四章 第五节 调度执行（二）
我们要在上一章的基础上，实现一个功能。输出由输出可知，字段obj.foo的值一定会从1自增到3，2只是它的过渡状态。如果我们只关心最终的结果而不关心过程，那么执行三次打印操作是多余的，我们期望的打印是:解决办法`代码effect中...
2022-06-05 15:45:23
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人