threejs
DBBH
成都有合适webgl/webgpu岗位的请私信我
展开
-
webgl调试之排查内存泄漏
然后我们如何确认泄露了呢,我们需要把代码梳理清楚,知道哪个时机,在delete,在create,那么这个时候,按道理,delete了n个对象,create了N个对象,那么内存就是N个对象所占的,根据这个地方,你重新执行s次这个流程,看一下是否程序里只有N个对象即可。这个快照的摘要那里,点进去,谷歌里可以选择compare,那么能帮你看上一次和这次的区别,你自己也能看出来的,但是这只是告诉你某个对象泄露了,给你一点思路,具体是怎么回事,你就顺着对象的代码逻辑梳理慢慢找。就能获取一张现在的内存情况了。原创 2024-01-06 22:40:36 · 506 阅读 · 0 评论 -
three.js 第五十六用 看看vertexnormalhelper
然后给法线也乘一个世界矩阵,然后乘一个size再把结果加到position上,俩顶点就有了,一根针就做好了。然后把新的position收集起来,用line画出来就可以了。然后取出顶点的position,都乘上世界矩阵。先看看他的构造函数,传入一个obj,比较朴素。然后,update做了啥呢。先保证obj世界矩阵是最新。原创 2022-12-27 21:28:42 · 113 阅读 · 0 评论 -
three.js 第五十四用如何给shader传递结构体数组
如何给shader传递结构体数组原创 2022-07-27 18:10:04 · 620 阅读 · 0 评论 -
three.js 第五十三用TubeGeometry
threejs交流群511163089原创 2022-06-15 10:34:53 · 332 阅读 · 1 评论 -
二三维联动小思考
背景一般游戏里比如LOL有个小地图,有的软件还有一个像是俯视图的二维小地图,这里如何同步两边的transform呢?第一种想法3D是主场景,然后2D直接上方一个正交camera实时绘制存在问题这样绘制两次,不好这样如果要操作2D视图,那怎么办第二种想法直接绘制一个2D场景 比如3D用了three 2D就拿个cocos?laya?pixi这些具备2D能力的库来单独构造一个2D场景这样也绘制两次,但是2D场景一般来说就是sprite集,会比3D场景绘制两次好太多了可以操作2D视图如原创 2021-12-11 21:03:55 · 3015 阅读 · 0 评论 -
three.js源码 解惑失败
THREE的core里面的Object3D竟然是继承自dispatcher为啥呢然后会为对象注册一个dispose方法 像下面这种最后dispose是触发事件来销毁可是 我搜了一下 好像只绑定了dispose方法 那个session目前不知道是啥那么这里我的疑惑是为啥要用dispatch来dispose 为啥不直接给对象一个dispose方法。这两者有啥不同之处,有啥优劣之分。想不明白, 希望有大佬解惑...原创 2021-11-26 14:48:34 · 515 阅读 · 0 评论 -
后期效果 内外描边
描边效果,有往外扩的外描边和往里收的内描边外描边的一种方式,步骤讲解1 物体白色,背景黑色,绘制到RT12 拷贝到另外一个RT23 RT2模糊4 RT3 = RT2-RT15 RT3 * Color + RT1得到最终色彩首先黑白绘制,是为了最后一步 白色方便调色步骤3 模糊后 就会外扩出去,就像bloom步骤4 减去原色 就会只剩下外扩那一圈步骤5 叠色内描边1 物体黑色 背景白色 绘制到RT12 拷贝到另外一个RT23 RT2模糊4 RT3 = RT2-RT15 RT3原创 2021-09-13 10:59:32 · 219 阅读 · 0 评论 -
后期如何做到类似EdgeGeometry的描边
首先是EdgeGeometry这个实现就是拿到两个三角面法线康康夹角那么后期来做的话1 判断这个像素,他是两个三角面共享那条边上面的像素2 对比两个三角面的法线但后期有别的方式阔以得到线,下面这个Roberts这个算法我百度搜到的图是下面这样的,和文章里有点不太一样,但不重要,上面文章利用了这个检测了线,感觉上,原理就是这个点四周的点和自己的值差距大不大然后调节阈值,应该可以实现edgegeometry的效果,当然还有别的边缘检测算法可能更骚...原创 2021-09-13 10:48:24 · 205 阅读 · 0 评论 -
three.js第五十二用 特大喜讯特大喜讯
MRT出来啦啥是MRT 有啥用啥是MRT有啥用总结啥是MRT 有啥用啥是MRT首先贴上three里提供的最简单的一个DEMO的fragment代码你看他有俩out 顶点着色器out是到片源 那片源out到哪?那么out的目的地就是纹理中也就是说你这次绘制,可以输出一些东西到好几个纹理中,这就是MRT有啥用整一个简单点的例子,就是名为延迟渲染的一种操作,假如100个灯,每个mesh都要计算100个灯的逻辑,N个物体就N*100次逻辑而延迟渲染,步骤就是把几何信息绘制到几张纹理上,然后在q原创 2021-08-10 21:14:31 · 285 阅读 · 0 评论 -
粗版仿Sketch Up的cameracontrol的思路
threejs交流群511163089进去他们官网玩一下,发现有点意思。那么想一下大概怎么模仿(发出白嫖的声音)呢操作看看,鼠标向上,相机向上,鼠标向右,相机向右。这里你如果觉得方向反了拿起你身边的物体试试,你看看头移动看见的视觉效果。于是乎,劣质版就可以做出来了首先mousemove里看看鼠标方向然后以鼠标往上为例,camera的移动方向就向当前的up方向的方向移动,然后保持lookat的方向不变,这里不是lookat不变,是那个direction不变。向left up rig原创 2020-10-29 11:13:57 · 149 阅读 · 0 评论 -
three.js第五十一用 拖拽功能解剖transformcontrol 二
threejs交流群511163089但是webgpu出来的话,shader就不是glsl了,需要花时间学新语法。开始更新gizmo将所有物件都塞进handles;开始遍历这里解释一个情况,别的差不多helper就是那根虚线,我测试感觉旋转的时候才触发这个条件。如果是轴是X轴,那么初始就是X 不用管如果是Y轴,那么就绕Z轴转动90度,变成与Y轴重合的方向的指示线别的也差不多这样。这里处理的是辅助线几乎垂直于脸的时候的情况,隐藏下面也基本这样处理一些原创 2020-10-17 10:17:00 · 846 阅读 · 0 评论 -
three.js第五十用 拖拽功能解剖transformcontrol 一
threejs交流群511163089插句题外话,three121版本已经有webgpu的sandbox了,webgpu指日可待。这个control代码相当长,可能要点时间解剖。这个control进来就new了个这个我们先看看这个是啥定义了两种材质然后改改颜色透明度作为每一根axis然后是箭头几何体和缩放用的几何体还有这个应该是一根线,当你平移操作的时候你可以看见定义了很多很多层级结构,显示不同的axis样式,具体怎么映射后面看顺着原创 2020-10-15 10:02:20 · 1555 阅读 · 0 评论 -
three.js第四十九用 连续运算符号封装
threejs交流群511163089function SubV(a, b, normalize = false) { if (normalize) return a.clone().sub(b).normalize(); return a.clone().sub(b);}function AddV(a, b, normalize = false) { if (normalize) return a.clone().add(b).normalize(); retur原创 2020-08-10 16:55:39 · 239 阅读 · 0 评论 -
threejs 第四十五用 frustum的intersectsSphere
threejs交流群511163089sphere.applyMatrix4( object.matrixWorld );判断与圆相交就是看到圆心距离是不是小于等于半径。这中间发生了一些事情,圆心变过去了,但是半径喃。sphere.radius*matrix.getMaxScaleOnAxis这个东西getMaxScaleOnAxis: function () { v...原创 2020-02-13 16:37:41 · 670 阅读 · 0 评论 -
threejs 第四十四用 半透明问题的研究
threejs交流群511163089先看看真·大佬https://blog.csdn.net/qq_16756235/article/details/78303695CustomDepth和Pixeldepth Unreal里面有这个东西然后看完之后 就是我的理解和思路了CustomDepth小的情况 就是物体被挡住了 这时候可以剔除了如果大 那就是在可见区域最前头 那保留自...原创 2020-02-08 12:12:45 · 2349 阅读 · 0 评论 -
threejs 第四十三用 描边和局部描边的一种实现方式
threejs交流群511163089这种方式不适合半透明物体局部描边 你首先能知道哪些地方你要描边 也就是或者你有描边的整个mesh或者你有描边的所有顶点 然后构造mesh第一步画这个描边的物体 side=THREE.BackSide 以及 scale一个尺寸这样会得到一个只看得见背部且比原来大一丢丢的mesh第二步side=THREE.FrontSide画物体...原创 2020-01-21 09:08:33 · 3149 阅读 · 0 评论 -
threejs 第四十二用 模型矩阵求逆矩阵
threejs交流群511163089一般矩阵求逆都是那种数学求法考虑情况 在gl框架中 一般模型矩阵 都是 旋转加缩放加平移构造的这矩阵 是不是可以通过缩放抵消 旋转抵消 位移抵消来构造一个新的矩阵而不是对原矩阵求逆来实现呐Ap得到p2 但是p2如果抵消了所有变换 不就是恢复到了p吗? 感觉可行 emmm...原创 2020-01-10 21:46:16 · 1180 阅读 · 0 评论 -
threejs 第四十一用 shader实现蜂窝六边形纹理
实现原理是参考的shaderbook,做法和那书上也有点点的不一样,灵光一闪,这个可以生成到rtt上,然后贴给几何图形,我其实比较喜欢这个形状的,很有科技感。threejs交流群511163089...原创 2019-11-03 14:31:20 · 1408 阅读 · 0 评论 -
threejs第八用 加载obj mtl
需要头文件<script type="text/javascript" src="loaders/MTLLoader.js"> </script> <script type="text/javascript" src="loaders/OBJLoader.js"> </script> 加载部原创 2018-07-26 15:59:34 · 2457 阅读 · 1 评论 -
threejs 第三十二用 第一人称漫游相机 带碰撞
这个是站在斜坡上的镜头 WSAD前后左右移动 空格跳跃本来我想用屏幕坐标中心转世界坐标作为前进方向 再求出左右移动方向,结果发现竟然是偏的。最后参考threejs自己的DEMO 找到了正确的打开方式碰撞的话 给所有东西加碰撞体 相机也要加个 然后就能检测碰撞了threejs交流群511163089...原创 2019-05-15 14:02:15 · 5450 阅读 · 3 评论 -
threejs 第三十三用 更新对象矩阵
旋转平移缩放这些操作最终是为了构造出矩阵来。所以尝试一下直接改他的矩阵结果 发现代码顺序竟然要按这样var matrix=new THREE.Matrix4()mesh.matrix=matrix;mesh.matrixAutoUpdate=false;才能更新 这个是个local的 不过能改这个感觉一般也够用了threejs交流群5111...原创 2019-06-11 08:52:00 · 1403 阅读 · 2 评论 -
threejs 第三十四用 3D饼状图
饼状图画出来就是这个样子的 STEP1 先创建一个顶部封口侧面未封口的圆柱STEP2 把侧面补上打个directional灯 看起来就是这样子了threejs交流群511163089...原创 2019-06-25 14:26:31 · 3289 阅读 · 1 评论 -
web端的shader效果五 网格扫描
被扫描的地方显示是网格 这有个问题 对象网格不好看的话 很影响美观 看这枪的网格 没有头盔好看原创 2019-06-25 20:14:38 · 643 阅读 · 0 评论 -
THREEJS 第三十五用 发光感的墙
class Wall{ constructor() { }}var arr = []for (let i = 0; i < n; i++) { arr.push(new THREE.Vector3(x,y,z)}var wall = new Wall(scene, arr);这个可以做这种看起来有点冒光的墙壁传一堆点进来 根据y拉...原创 2019-07-01 22:10:14 · 8274 阅读 · 1 评论 -
THREEJS 第三十六用 单体发光官方加入THREE啦
106版本 加入了单体发光的DEMO大家快去体验吧之前自己写的 发现别人的代码 结构就很清晰 自己的一团浆糊-v- 都有点不想用自己的了webgl_postprocessing_unreal_bloom_selective 文件名 大家体验一下吧threejs交流群511163089...原创 2019-07-09 10:27:15 · 2233 阅读 · 0 评论 -
THREEJS 第三十七用 Box包围盒
geometry.computeBoundingBox();//得到一个boxObject.updateMatrixWorld( true );box.copy( Object.geometry.boundingBox ).applyMatrix4( Object.matrixWorld );box.intersectsBox ( box : Box3 )要update对应objec...原创 2019-07-14 11:04:29 · 5977 阅读 · 0 评论 -
web端的shader效果4 Threejs飞线
这个有2000根飞线。我是1060显卡 34FPS如果需要的 请自行研究原创 2019-05-01 11:12:06 · 3226 阅读 · 2 评论 -
threejs 第三十八用 MeshToonMaterial
这个MeshToonMaterial材质好像让画面有点动画的感觉threejs交流群511163089原创 2019-07-18 22:35:44 · 722 阅读 · 0 评论 -
web端的shader效果 8 代码实现小旋风 hasaki
这个hasaki有很多实现的方式看起来还是有点意思threejs交流群511163089原创 2019-09-03 15:22:41 · 513 阅读 · 0 评论 -
threejs 第三十九用 WebWorker
var i=0;self.onmessage=function(event){ //console.log(event) postMessage(event.data+1)}function test(){ postMessage(i++) setTimeout(() => { test() }, 100);}test(...原创 2019-09-17 14:57:25 · 1355 阅读 · 2 评论 -
js es6 继承 简单记一下
class A{ constructor(a) { this.a=a; } log() { this.a=0; }}class B extends A{ constructor(a) { super(a); this.a=a; } blog()...原创 2019-05-06 10:08:19 · 370 阅读 · 0 评论 -
threejs 第三十用 ExtrudeGeometry
new THREE.Shape(a) a=[n个 THREE.Vector2(xxx,yyy)]这样先构造一个平面然后var extrudeSettings = {steps: Number,//分几份depth: Height,//拔起来多高//这里还有很多参数 但是我没怎么用 有兴趣可以看看 还能整出圆角来};最后new THREE.ExtrudeBufferG...原创 2019-04-18 14:47:55 · 1769 阅读 · 0 评论 -
threejs第十六用 OrbitController
头文件 <script src="js/controls/OrbitControls.js"></script>var controls = new THREE.OrbitControls( c, r.domElement ); camera和WebGLRenderer// 使动画循环使用时阻尼或自转 意思是否有惯性 controls.enableDampin...原创 2018-10-11 13:52:39 · 992 阅读 · 2 评论 -
threejs第十三用 简单堆积木
放一个地平面 然后点击,发出射线,打到地面了或者打中小方块了就生成一个小方块 按住shift点击就销毁一个核心就这么多,这里的小方块长50 function onDocumentMouseDown(e) { e.preventDefault(); mouse.x = ( e.clientX / renderer.domElement.clientWid...原创 2018-08-03 11:26:57 · 1094 阅读 · 0 评论 -
threejs第十二用 BloomPass辉光
看DEMO的名字 这个特效是参考UE4的 很炫下面是需要的头文件<script src="js/loaders/RGBELoader.js"></script><script src="js/loaders/HDRCubeTextureLoader.js"></script><script src="js/pmrem/PMR原创 2018-08-02 15:30:34 · 8082 阅读 · 0 评论 -
记一下js keycode
HTML用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(UserPwd)" />密码:<input name="UserPwd" type="password" onKeyPress="IsEnterKeyPress()">JavaScript转载 2018-07-31 10:59:38 · 304 阅读 · 0 评论 -
threejs 第九用 物理引擎
导入 js<script src="libs/physi.js"></script> <script src="libs/ammo.js"></script> 不知道这个是什么操作 但是好像有必要 'use strict'; Physijs.scripts.worker = '/libs/physijs_wor...原创 2018-07-27 17:01:47 · 1800 阅读 · 1 评论 -
threejs第十一用 wsad移动camera
找到camera面向的方向,normalize 乘1个移动速度 就是这一次移动的距离了function onDocumentKeyDown(event) { var moveSpeed=10;//速度 if(event.keyCode==87){ var vector = new THREE.Vector3(0, 0,1.0)...原创 2018-07-30 16:21:44 · 2463 阅读 · 1 评论 -
threejs第一用
var scene = new THREE.Scene();场景var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );透视投影var renderer = new THREE.WebGLRenderer();渲染器 documen...原创 2018-07-22 15:43:19 · 453 阅读 · 0 评论 -
threejs 第十用 四元数简单camera
按前面写过的四元数旋转 就是要构造一个q Pq-1代表了P绕轴转x度的一次旋转变换threejs里面封装了 就不需要全部算了。就用个接口threejs中,先构造一个q=setFromAxisAngle(axis, -angle)好像q就已经是得出一个qPq-1了。。乘原来的qua就直接得到新的qua取得P=camera.quaternion 然后P multiply q,再归一化,最后...原创 2018-07-29 17:14:23 · 2389 阅读 · 0 评论