- 博客(502)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 webgpu初体验新版shader语言WGSL
threejs交流群511163089目前webGPU好像还没正式登场，但是迫不及待的体验了一下现在的测试版本 vertex: `const pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>( vec2<f32>(0.0, 0.5), vec2<f32>(-0.5, -0.5), vec2<f32>(0.5, -0.5));[[built
2021-03-12 09:30:16
2542
原创 基于three.js的shader入门教程 十
threejs交流群511163089threejs交流群511163089threejs交流群511163089这是第300篇文章，咱们说点技巧吧。这个怎么做的喃 bloom就不说了 直接用的官网的那个东西。这些一蹦一跳的怎么做的喃。基于一个planebuffergeometry。interval里面更新数据就行了。这里基于plane的话，你可以在shadertoy学到神级操作。shader做了啥，就读当前像素的localY，看看是不是足够矮，高的就删除，是不是很清
2021-01-29 14:48:02
2054
原创 web端的shader效果十 three.js里shader实现钻石
光栅化实现的，样子还行，还可以加个bloom看看效果，锯齿还需想办法去掉
2021-01-14 14:12:29
1576
2
原创 基于three.js的shader入门教程 九
threejs交流群511163089上回说到这个后期，可以涂鸦，或许你的作品是一张静止的很好看的图片，所以想要保留呐，咋个将图片弄到本地呐。let pixelBuffer = new Uint8ClampedArray(4 * w * h);renderer.readRenderTargetPixels(renderTarget, 0, 0, w, h, pixelBuffer);let imgData = new ImageData(pixelBuffer, w, h);createIm
2020-06-18 14:14:10
1286
原创 基于three.js的shader入门教程 八
threejs交流群511163089后期特效先说下概念。比喻一下，就像先将物体都画在一张纸上，再对纸进行涂鸦（写一些shader），最后给你看这张纸。还能将纸画在另外一张纸上，继续涂鸦，涂鸦很多层造出神奇的效果。实质是使用了FBO,frame buffer object。在three里头封装之后名字是WebglRenderTarget，或者你都不用设置这个，使用他的EffectComposer。用target的栗子是webgl_rtt.html。别的就是webgl_p.
2020-05-14 10:37:51
843
原创 基于three.js的shader入门教程 七
threejs交流群511163089想想，最终显示的那个颜色，是不是vec4的一个东西。gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);尾巴上的position就是模型最原始的坐标，也就是建模软件里头看得见那种，不出意外应该是的。如果是一个20米的楼，那position.y是就是0-2...
2020-04-17 16:46:37
894
2
原创 基于three.js的shader入门教程 六
threejs交流群511163089UV效果可以做啥为了简单操作 使用PlaneBufferGeometry这个的uv会从00-11给你排好varying vec2 vUv;void main(){ vec2 uv=vUv;//这里不说if不好这个问题 简单的写一个效果if(uv.x<0.25)gl_FragColor=vec4(1.0,0.0,0.0...
2020-03-10 15:12:06
923
原创 基于three.js的shader入门教程 五
threejs交流群511163089UV贴图模型长的五颜六色的，一般都不是靠每个顶点带个color的attribute来的而是用的贴图那么贴图呐 图 是一个平面 坐标只有x和y 这就构成UV了 u就是x v就是y怎么贴 每个顶点还是带attribute 但是只需要带uv带上一个的xy这样在渲染这个顶点的时候 能在图上取xy处的颜色作为渲染色THREE里头你的模型如果带了U...
2019-12-19 15:32:21
855
原创 基于three.js的shader入门教程 四
threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...
2019-12-09 18:13:53
991
原创 基于three.js的shader入门教程 三
threejs交流群511163089片源着色器前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...
2019-11-20 17:20:55
953
2
原创 基于three.js的shader入门教程 二
threejs交流群511163089顶点着色器这个是决定你那个点最后画在屏幕哪个位置的，最后xyz都是[-1,1]这么一个区间的值 z用来处理遮挡关系点的位置怎么传入呐 有VAO，VBO这些东西 但是我们基于threejs，emm，threejs给你封装了一下叫attributeattribute下有position字段normal字段uv字段等等，里面会装很多float像这样...
2019-11-19 15:38:56
1406
2
原创 基于three.js的shader入门教程 一
threejs交流群511163089扫盲一下shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。threejs用的是glsl这款,语法跟C差不多。这个在web端暂时只有顶点着色器 片源着色器可以用，这俩是啥？模型是三角面构成的，每个点有个三维坐标。顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候，你如果想看得见这个点，必须投到屏幕的可视坐标...
2019-11-15 08:57:38
2632
6
原创 pixi.js源码解析 anchor pivot
可以仅仅接受了一个texture，意味着他在00位置创建一个sprite 宽高是texture的宽高。注释说明了是rotate的中心，那么自然就是translate过去再旋转再移动到最终位置。这里默认w1 = 0 w0 = width h1 = 0 h0 = height。所以给一个anchor其实是让sprite计算vertex的坐标进行了一个偏移。首先利用sprite来观察，从效果来看，是移动了sprite的图片。anchor是让他进行0-1的一个位移。那么先回到sprite的入参。
2025-11-19 20:45:18
180
原创 PIXI源码解析 鼠标点击判定逻辑
其中只有一处地方和我固定思维里的3D有点不同，那就是他的这些判定，其实都是判定自身局部空间的localbounds,那对于一个空node,显然他这个逻辑才能走通他这里的todo也提到了是否使用bounds 也就是我固定思维那种逻辑，即使是空node，也有worldbounds这里我们考虑一下如果使用worldbounds的时候怎么做每个node先打中worldbounds，然后打localbounds，打中local才算hit。
2025-10-28 10:03:19
370
原创 纹理压缩的一个误区记录
之前使用buffer创建纹理的时候，总是需要输入RGBA数组，这带来了一个固定思维，纹理一定是RGBARGBA这样的，再到shader里采样的时候，结果仍然是对应位置的RGBA，很自然的想到纹理会在显存那边被存储为RGBARGBA这样的内容，无法进一步优化。
2025-09-30 17:05:31
264
原创 2D字体知识补充 二
摘要 本文解释了EM在字体设计中的概念。EM可以理解为字体绘制的虚拟画布，以网格为单位（通常约定为1024或2048格）。字体设计时会定义ascender和descender值（合计约等于网格数），实际字体大小由这些值与font-size共同决定。例如：1000格画布配500/-500的ascender/descender，当font-size为100px时，每个网格占0.1px，实际绘制高度为100px。虽然理论上ascender/descender总和可能远超网格数，但实际设计会遵循行业惯例，使这些值在
2025-08-11 14:26:15
209
原创 2D字体知识补充 一
这里说em是很多个grid构成，但他没说究竟一个Grid实际多大啊，怎么映射到pixel的，比如上面的pt是有具体物理映射的。按我理解pt就是一个板子上一个图钉thumbtack 图钉的大脑袋的面积是1/72。文中的例子是12pt的字体在300 * 300的dpi的resolution下。pt就是真的point，是物理单位，值是1/72 inch。他的pixel = 12/72 * 300 = 50。PPI对应的是pixel per inch。pixel的值等于pt*dpi。
2025-07-30 17:42:07
267
原创 RenderDoc抓webgl 1
就只能直接抓浏览器了，拿PIX抓是成功了，但是DXIL转HLSL有点麻烦，干脆看下RenderDoc吧。有一个特别的情况，遇到一个高手，不知道为甚他的界面spector找不到那个canvas。这里就要刚刚记住的ID，搜到之后，右下角点击inject就算进去了。勾选Enable process injection。打开他，点击Tool->Setting。这时候浏览器会被拦住，记住那个ID。然后打开renderdoc。接下来的操作就是抓来看了。首先要下老一点的版本。然后写一个bat脚本。
2025-06-20 16:41:33
316
原创 OSG编译wasm尝试
然后你cd到那个webbuild里，再然后你去web里把cmakelist.txt里限制一下cpp只能是11，然后就可以按教程开始了，不出意外的话就能成功了！于是顺着看了看，默认教程是xubuntu的一个系统跑的，但是我本着试一试的想法，拉下来直接在windows上跑，奇奇怪怪的报错简直头皮发麻。于是我就在windows用vs code开发完了 打开WSL执行一下make -j10即可，真舒服啊。然后新建一个文件夹all cd进去创建一个webbuild文件夹，然后拉web和OSG源码。
2025-05-30 17:17:03
403
原创 PIXI的一个trick
好了，这里来一个trick解决一下，直接几何创建的时候R放大100倍，mesh的scale = 0.01，最后套娃一个parent，然后再绘制出来，就是圆润的了，但是这存在的问题就是面数可能非常非常大，具体问题再具体分析，比如这个圆他可以SDF直接KO，如果是任意vector的话，就另寻他法了。RX RY就是radius，那么如果你的圆R=1和R=1000，肯定段数是完全不一样的。R=1的圆肯定会这个鬼样子。
2025-05-06 10:10:39
272
原创 【大坐标处理】
这种做法每个坐标都需要存储两倍大小的坐标信息high low两个vector3，但是似乎如果要支持double的话，没有其他好法子。
2025-03-21 17:42:38
570
原创 unity大坐标抖动处理测试
那么这里可以知道的是坐标太大了导致的，那么把所有物体共同偏移一下，即可得到第一幅图的效果，圆润的sphere又回来了。如果要做到最合理的offset，我觉得用camera的position的int部分最合理。第二幅图就是相机坐标是0 6360094 0的地方看见的模型，可以看见这个球体已经烂了。浮点数的计算是需要位数的，这种大坐标占的整数位数有点多了其实，所以我的验证代码是。
2025-03-02 11:13:24
404
原创 U3D支持webgpu阅读
为什么这么说，因为客户端方向unity肯定会做一个类似nanite的builtin的东西，好像已经有了，叫resident啥的，然后只要webgpu用户旺盛，早晚他会做成webgpu的支持，什么意思，也就是等等党就有福了，我反正觉得是这样，之前参与开发类似nanite的东西，太费神了。另外是VFX，如果要做点炫酷的效果，说老实话，web3D如果不做炫酷的效果真的约等于是没什么能做的事了。剩下这个没支持的说不定后来也有，因为他webgpu本身是支持的。这里看到已经该有的差不多都有了。
2025-02-09 20:48:44
474
原创 UE5材质篇5 简易水面
波纹感就是normal map混合，这个就是细节，也就是离近了的时候的normal map用法，一个base的，一个加一点scale的，各自设置speed。不得不说，UE5里搞一个水面实在是相比要自己写各种反射来说太友好了，就主要是开启一堆开关，lumen相关的，然后稍微连一些蓝图就几乎有了。参考 https://www.youtube.com/watch?这里要改一个shading model，要这个。那么接下来一个是反射，一个是折射，一个是波纹感。
2024-11-23 21:27:38
863
原创 UE5材质篇 4 材质表面雨滴打落
教程里本质上其实是先实验确定了湿滑表面的roughness和specular的值metallic这些，然后根据time来给表面的某些点这几个属性进行变换，主要是roughness和normal的变化。具体的变化是依赖了一张noise，这图在作者油管有放出这是RGBA四个通道都有用途，RG是normal的XY，Z直接给1。其中小雨点是static的，就不参与time的效果，time的部分，用大点的块作为动态的雨滴。materials 101的教程的灵感，特此记录一下。核心是法线乘一个系数得到动态效果。
2024-11-15 20:33:46
608
原创 UE5材质篇 3 MaterialFunction
这个可以避免一部分的蜘蛛网，这样就用的时候很多蜘蛛网缩小成为一个节点。首先创建一个，这里这个名字他就是函数名，后面用的时候搜就搜这个。然后暴露出去的函数的字段在蓝图的位置，由这个决定。双击进去，input和output就右键搜就行。然后选中状态就可以修改type。勾上这里就能暴露出去。
2024-11-12 21:18:36
921
原创 UE5材质篇 2 ICE 冰材质尝试
于是我找素材 https://www.fab.com/listings/f0ec263b-992c-4e96-b27e-86934684af6c。我感觉还是得加一下environment map的叠加，不然这个看着虽然能知道这是在做冰，但是他不太真，更像大理石一点。第一个视差，对diffuse roughtness normal都要应用。然后对颜色进行一点点修改连到base color。另外的划痕也是那里下载的frozen lake。冰的特色是表面有划痕，看下去有折射感。你别说，看起来有0.001分像。
2024-11-09 11:53:23
770
原创 UE5 材质篇 1 如何偏移顶点
XY加起来乘个缩放系数扔给sin结果乘个缩放系数即可。start content里的plane长这样。我们进行一点顶点偏移就能长这样。
2024-11-05 19:32:03
876
原创 UE5 材质篇 0 创建一个材质
首先在starter里的shape里拖入一个几何到场景里 我选了个sphere。type这里可以指定他是其他图片，例如normal map。采样一个之前给UV加个动态offset。然后开始制作一个材质，直接右键点击。左侧detail里选个图给他。
2024-11-02 10:38:37
1054
原创 UE5 第三人称学习之动画 control rig
这个东西和建模软件里有的是一个东西，然后IK就是你动脚，他帮你算出小腿大腿该怎么动，FK就是你自己动了大腿，摆小腿，然后再摆脚。使用最矮的脚的偏移给盆骨，这里三个值都是variable，还没给骨骼，接下来才是。先从双脚往下发射线，应该是射线，返回的Z应该是计算完毕之后的Z offset。呐，这里把三个offset给上去，骨骼就动了，最后就把两个脚传递给IK解算器。下面看这个footIK的，相对代码少点，这个功能是让脚不飘起来。接下来这个插值应该是动画过渡把Z变到期望值。只有四步A B C D。
2024-11-01 21:51:20
580
原创 UE5动画控制 基础
mixamo先去选择一个character点击下载就这个下载下来然后选几个animation，记得勾选把动作下载了 without skin就是只要动作然后把他们放在一个文件夹里先。
2024-11-01 00:08:31
1437
原创 UE5之5.4 第三人称示例代码阅读
构造函数，添加角色的移动属性，限制了当controller移动角色不会乱转，然后创建了一个相机杆，创建了一个跟随相机，绑到相机杆上。move就是获取输入，拿到对应的前面和侧面的移动向量，移动一点，look就是上下看和左右看。game mode部分就只有指定了一下默认pawn用这个新创建的characterBP对象。第三人称的代码相对第一人称少了很多，只有一个移动跳跃的能力。然后在这个函数设置了输入相关的响应函数。
2024-10-28 02:00:00
353
原创 UE5之5.4 第一人称示例代码阅读2 子弹发射逻辑
weapon实现attach，然后是pickup component的mesh使用gun，等character碰到gun了就触发onpick 调用attachattach后，character就有一个枪拿在手里了鼠标点击就能出发fire函数了就生成sphere飞出去。
2024-10-24 22:24:57
1091
原创 UE5之5.4 第一人称示例代码阅读1 FirstPersonProjectile
如果碰到啥了，且那个对象也进行物理模拟，就给那个对象一个刺激？emmm反正就是让他也受力，传过去的是自己的速度*100和自己的位置。sphere那个就创建了一个subobject，初始化了一下，然后这里。这个projectilemovement应该是控制物理运动的。然后是另外一个component，就是子弹那个。看起来是将触发函数绑定到这个hit事件上。然后他就是rootComponent了。然后是两个component。既然如此，这几个文件都看看。另外就是onHit函数实现。这几个赋值操作看起来分别。
2024-10-24 21:47:20
711
原创 UE5 第一人称示例代码阅读0 UEnhancedInputComponent
这个东西是一个对输入进行控制的系统，看了一下第一人称例子里，算是看明白了，但是感觉这东西使用起来有点绕，特此梳理一下总结来说是这样的 一个context应该对应了一种character，一个context管理几个action，然后就是先要在面板里创建这些东西，最后在代码里去bindaction一下。
2024-10-23 21:35:17
847
原创 UE5 gameplay学习1 蓝图修改材质和参数
如果要设置材质的属性，就有一点奇怪了，通常来说get到material就能设置了，这里需要如下操作 create一个dynamic material instance。这个对象直接Set Material这个很直观就设置了。然后还要指定要操作哪个parameter，不过能用就行。第一种是直接修改这个材质，比较朴素。
2024-10-21 07:00:00
1015
原创 UE5 gameplay学习 蓝图0 level blueprint
在场景选中一个物体，右侧面板拿到他，直接拖入蓝图，就能操作他了。这里获取到了这个物体，在gamebegin的时候把Z加了500。首先在左上角这个位置可以创建一个这个蓝图。我理解这个蓝图适合做全局事件规划啥的。执行播放的时候能看见他从天空掉落。
2024-10-20 21:42:22
489
原创 blender 记一下lattice
具体来说 我认为在摆大形的时候可以用这个工具会比较方便吧，和雕刻里有点类似。shift A分别创建俩对象一个BOX 一个就是lattice对象。这里可以细分BOX和细分lattice，这样可以做到更灵活的效果。你选取一个点进行运动，他会带着周围的BOX的顶点进行运动。然后指定object为刚刚创建的lattice对象。创建一个叫做lattice的修改器。进入lattice的编辑模式下。这个工具能够辅助你捏形状。这里演示如何操作BOX。然后在BOX的修改器内。
2024-10-10 22:18:37
459
VulkanSDK.zip
2020-08-09
boost 无法使用的问题
2016-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人