- 博客(629)
- 资源 (1)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 three.js NodeMaterial(节点材质系统)的 onBeforeRender(updateBefore) onAfterRender(updateAfter)
NONE 更新方法不执行。FRAME 更新方法按帧执行。RENDER 每次渲染都会执行更新方法。一个帧可能由多个渲染调用生成，因此此值允许比frame更详细的更新。OBJECT 更新方法是按照使用节点进行渲染的｛@link Object3D｝执行的。
2025-03-06 09:37:16
118
原创 three.js使用cannon.js 进行不规则物体碰撞检测
优化 可将拆分的数据保存 缓存使用 拆包过程开销很大会卡顿阻塞 网页会卡顿数秒。使用形状类似 但点更少的物体进行拆解 如右侧模型。控制台可能会出现 警告和报错 但不影响使用。将负责的模型拆分成多个小模型。如此就添加了可用的形状。
2025-01-18 11:49:24
256
原创 three.js透光率实现原理归纳
很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线，透光性属性用于这种类型的材质。透光率（或者说透光性），范围从0.0到1.0。当透光率不为0的时候, opacity透明度应设置为1.会增加不少开销 额外渲染一次 单独渲染 作为。
2024-12-06 19:02:40
343
原创 关于频繁读取canvas数据- 使用three.js进行纹理绘制心得
如上图所示 在进行纹理绘制功能时 经常要同步读写canvas的数据 而canvas越大开销越大 尽可能在不损失效果质量的情况下使用更小的画布 但即便是512x512的大小 数据也有1048576项（512 x 512 x 4）在使用实例网格的时候的设置 即便设置动态instanceMatrix 也需要设置更新才会生效。测试环境为每帧遍历一万次 获取一万次1像素 开销颇大 改为后面的方式 则帧率无明显波动。
2024-12-03 19:18:14
284
原创 ExecStart=/usr/bin/mongod --config /etc/mongod.conf (code=exited, status=2)
mongodb 开启验证后出现这个问题。要用两个空格表示缩进 而不是tab。邪门的问题 居然是格式问题。
2024-11-12 10:42:16
252
原创 Three.js遮罩多场景穿梭过渡
在靠近门时完全渲染一个场景 在穿过门的同时切换场景关系。渲染一个遮罩 亮的区域为需要显示另一个场景的区域。获取穿梭门的渲染范围在屏幕中的占比。判断是否穿过门和方向。
2024-10-25 16:38:19
594
2
原创 WebGL读取画布任意像素颜色WebGLRenderingContext.readPixels
该方法是读取当前当前缓冲区(framebuffer)的不过three提供的方法可以传入指定的RednerTarget。three实现的思路是通过 先绑定传入的renderTarget 在最后再绑定回来。以下为threejs实现代码。
2024-10-17 18:02:06
476
原创 Cook-Torrance 直接高光反射模型
<html> <head> <title>Cook-Torrance BRDF computed by shader</title> <style> body { font-family: Monospace; background-color: #f0f0f0; margin: 0px
2024-10-04 14:25:42
745
原创 ReflectedLight.directSpecular 直接高光反射计算shader
【代码】ReflectedLight.directSpecular 直接反射计算shader。
2024-09-26 08:55:28
122
原创 THREE.JS网格边缘像素化后处理
不加处理如下⬇️<!-- * @Author: hongbin * @Date: 2024-09-04 11:06:55 * @LastEditors: hongbin * @LastEditTime: 2024-09-04 13:24:24 * @Description: --><!DOCTYPE html><html lang="en"> <head> <title>Grid Effect</
2024-09-04 13:45:56
1137
原创 threejs 节点材质系统 绑定attribute
新的 节点材质系统 绑定属性及使用 非常方便 不必重复声明。包装后就可以在shader中直接使用。顶点着色器 声明 varying。片元着色器 使用 varying。以instances为例。
2024-08-05 19:09:50
464
1
原创 Three.js & WebGPU 节点材质系统 控制instances的某个实例单独的透明度，颜色等属性
实现思路：1. 声明一个实例必要的属性`instanceMatrix2. 在设置位置矩阵的时候填充这个数组3. 在shader中获取当前的索引修改的源码的函数就是当前着色的实例索引5. 对比当前着色的实例是否是选中的实例6. 如果是选中的实例加入一个变量影响选中的实例的透明度（也可以影响其他材质参数 这里以透明度为例）7. 影响片元着色器透明度参数在对象的方法中将透明度乘以的值或者直接设置为的值如此便可通过更改uniform来决定某个实例的透明度了以此思路其他材质属性也均可单独指
2024-08-02 13:16:00
1130
1
原创 Threejs将场景生成全景图导出
创建全景相机CubeCamera（六个方位的透视相机）并渲染场景。即可按照常规的canvas导出图片了。读取六个面的纹理数据。填充进canvas中。
2024-07-07 15:23:02
357
原创 Three.js鼠标拖动设置骨骼姿态
拖拽鼠标设置骨骼旋转角度（使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发控件对应的方法 模拟拖拽控件的过程 ）更改TransformControls源码 屏蔽原本行为 生成的Mesh需要使用新的类 这个类继承THREE.Mesh 覆盖其raycast方法 优化射线检测需要更新boundingBox和boundingSphere所需的开销 跳过boundingShere检测过程
2024-06-27 21:49:28
541
原创 three.js各向异性shader实现记录
将RE_Direct_Physical 方法 定义成 RE_Direct 使用。点光源，聚光灯，方向光 这三种 进行每个类型灯光遍历执行大致如下 点光源例。
2024-02-11 09:54:37
573
javascript创建一个数组和创建一个对象哪个开销大
2022-09-17
mongodb如何在获取值的同时获取对应的类型
2021-11-16
博客文章的评论功能 数据库里应该怎么存
2021-09-02
html css怎么实现这种弧度效果
2021-08-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人