- 博客(493)
- 资源 (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
2440
原创 基于three.js的shader入门教程 十
threejs交流群511163089threejs交流群511163089threejs交流群511163089这是第300篇文章，咱们说点技巧吧。这个怎么做的喃 bloom就不说了 直接用的官网的那个东西。这些一蹦一跳的怎么做的喃。基于一个planebuffergeometry。interval里面更新数据就行了。这里基于plane的话，你可以在shadertoy学到神级操作。shader做了啥，就读当前像素的localY，看看是不是足够矮，高的就删除，是不是很清
2021-01-29 14:48:02
1887
原创 web端的shader效果十 three.js里shader实现钻石
光栅化实现的，样子还行，还可以加个bloom看看效果，锯齿还需想办法去掉
2021-01-14 14:12:29
1468
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
1127
原创 基于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
808
原创 基于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
851
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
784
原创 基于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
785
原创 基于three.js的shader入门教程 四
threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...
2019-12-09 18:13:53
867
原创 基于three.js的shader入门教程 三
threejs交流群511163089片源着色器前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...
2019-11-20 17:20:55
915
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
1355
2
原创 基于three.js的shader入门教程 一
threejs交流群511163089扫盲一下shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。threejs用的是glsl这款,语法跟C差不多。这个在web端暂时只有顶点着色器 片源着色器可以用，这俩是啥？模型是三角面构成的，每个点有个三维坐标。顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候，你如果想看得见这个点，必须投到屏幕的可视坐标...
2019-11-15 08:57:38
2495
6
原创 【大坐标处理】
这种做法每个坐标都需要存储两倍大小的坐标信息high low两个vector3，但是似乎如果要支持double的话，没有其他好法子。
2025-03-21 17:42:38
407
原创 unity大坐标抖动处理测试
那么这里可以知道的是坐标太大了导致的，那么把所有物体共同偏移一下，即可得到第一幅图的效果，圆润的sphere又回来了。如果要做到最合理的offset，我觉得用camera的position的int部分最合理。第二幅图就是相机坐标是0 6360094 0的地方看见的模型，可以看见这个球体已经烂了。浮点数的计算是需要位数的，这种大坐标占的整数位数有点多了其实，所以我的验证代码是。
2025-03-02 11:13:24
267
原创 U3D支持webgpu阅读
为什么这么说，因为客户端方向unity肯定会做一个类似nanite的builtin的东西，好像已经有了，叫resident啥的，然后只要webgpu用户旺盛，早晚他会做成webgpu的支持，什么意思，也就是等等党就有福了，我反正觉得是这样，之前参与开发类似nanite的东西，太费神了。另外是VFX，如果要做点炫酷的效果，说老实话，web3D如果不做炫酷的效果真的约等于是没什么能做的事了。剩下这个没支持的说不定后来也有，因为他webgpu本身是支持的。这里看到已经该有的差不多都有了。
2025-02-09 20:48:44
382
原创 UE5材质篇5 简易水面
波纹感就是normal map混合，这个就是细节，也就是离近了的时候的normal map用法，一个base的，一个加一点scale的，各自设置speed。不得不说，UE5里搞一个水面实在是相比要自己写各种反射来说太友好了，就主要是开启一堆开关，lumen相关的，然后稍微连一些蓝图就几乎有了。参考 https://www.youtube.com/watch?这里要改一个shading model，要这个。那么接下来一个是反射，一个是折射，一个是波纹感。
2024-11-23 21:27:38
572
原创 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
489
原创 UE5材质篇 3 MaterialFunction
这个可以避免一部分的蜘蛛网，这样就用的时候很多蜘蛛网缩小成为一个节点。首先创建一个，这里这个名字他就是函数名，后面用的时候搜就搜这个。然后暴露出去的函数的字段在蓝图的位置，由这个决定。双击进去，input和output就右键搜就行。然后选中状态就可以修改type。勾上这里就能暴露出去。
2024-11-12 21:18:36
574
原创 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
498
原创 UE5 材质篇 1 如何偏移顶点
XY加起来乘个缩放系数扔给sin结果乘个缩放系数即可。start content里的plane长这样。我们进行一点顶点偏移就能长这样。
2024-11-05 19:32:03
612
原创 UE5 材质篇 0 创建一个材质
首先在starter里的shape里拖入一个几何到场景里 我选了个sphere。type这里可以指定他是其他图片，例如normal map。采样一个之前给UV加个动态offset。然后开始制作一个材质，直接右键点击。左侧detail里选个图给他。
2024-11-02 10:38:37
464
原创 UE5 第三人称学习之动画 control rig
这个东西和建模软件里有的是一个东西，然后IK就是你动脚，他帮你算出小腿大腿该怎么动，FK就是你自己动了大腿，摆小腿，然后再摆脚。使用最矮的脚的偏移给盆骨，这里三个值都是variable，还没给骨骼，接下来才是。先从双脚往下发射线，应该是射线，返回的Z应该是计算完毕之后的Z offset。呐，这里把三个offset给上去，骨骼就动了，最后就把两个脚传递给IK解算器。下面看这个footIK的，相对代码少点，这个功能是让脚不飘起来。接下来这个插值应该是动画过渡把Z变到期望值。只有四步A B C D。
2024-11-01 21:51:20
413
原创 UE5动画控制 基础
mixamo先去选择一个character点击下载就这个下载下来然后选几个animation，记得勾选把动作下载了 without skin就是只要动作然后把他们放在一个文件夹里先。
2024-11-01 00:08:31
1167
原创 UE5之5.4 第三人称示例代码阅读
构造函数，添加角色的移动属性，限制了当controller移动角色不会乱转，然后创建了一个相机杆，创建了一个跟随相机，绑到相机杆上。move就是获取输入，拿到对应的前面和侧面的移动向量，移动一点，look就是上下看和左右看。game mode部分就只有指定了一下默认pawn用这个新创建的characterBP对象。第三人称的代码相对第一人称少了很多，只有一个移动跳跃的能力。然后在这个函数设置了输入相关的响应函数。
2024-10-28 02:00:00
265
原创 UE5之5.4 第一人称示例代码阅读2 子弹发射逻辑
weapon实现attach，然后是pickup component的mesh使用gun，等character碰到gun了就触发onpick 调用attachattach后，character就有一个枪拿在手里了鼠标点击就能出发fire函数了就生成sphere飞出去。
2024-10-24 22:24:57
967
原创 UE5之5.4 第一人称示例代码阅读1 FirstPersonProjectile
如果碰到啥了，且那个对象也进行物理模拟，就给那个对象一个刺激？emmm反正就是让他也受力，传过去的是自己的速度*100和自己的位置。sphere那个就创建了一个subobject，初始化了一下，然后这里。这个projectilemovement应该是控制物理运动的。然后是另外一个component，就是子弹那个。看起来是将触发函数绑定到这个hit事件上。然后他就是rootComponent了。然后是两个component。既然如此，这几个文件都看看。另外就是onHit函数实现。这几个赋值操作看起来分别。
2024-10-24 21:47:20
572
原创 UE5 第一人称示例代码阅读0 UEnhancedInputComponent
这个东西是一个对输入进行控制的系统，看了一下第一人称例子里，算是看明白了，但是感觉这东西使用起来有点绕，特此梳理一下总结来说是这样的 一个context应该对应了一种character，一个context管理几个action，然后就是先要在面板里创建这些东西，最后在代码里去bindaction一下。
2024-10-23 21:35:17
683
原创 UE5 gameplay学习1 蓝图修改材质和参数
如果要设置材质的属性，就有一点奇怪了，通常来说get到material就能设置了，这里需要如下操作 create一个dynamic material instance。这个对象直接Set Material这个很直观就设置了。然后还要指定要操作哪个parameter，不过能用就行。第一种是直接修改这个材质，比较朴素。
2024-10-21 07:00:00
727
原创 UE5 gameplay学习 蓝图0 level blueprint
在场景选中一个物体，右侧面板拿到他，直接拖入蓝图，就能操作他了。这里获取到了这个物体，在gamebegin的时候把Z加了500。首先在左上角这个位置可以创建一个这个蓝图。我理解这个蓝图适合做全局事件规划啥的。执行播放的时候能看见他从天空掉落。
2024-10-20 21:42:22
372
原创 blender 记一下lattice
具体来说 我认为在摆大形的时候可以用这个工具会比较方便吧，和雕刻里有点类似。shift A分别创建俩对象一个BOX 一个就是lattice对象。这里可以细分BOX和细分lattice，这样可以做到更灵活的效果。你选取一个点进行运动，他会带着周围的BOX的顶点进行运动。然后指定object为刚刚创建的lattice对象。创建一个叫做lattice的修改器。进入lattice的编辑模式下。这个工具能够辅助你捏形状。这里演示如何操作BOX。然后在BOX的修改器内。
2024-10-10 22:18:37
383
原创 矮草坪渲染尝试
大概就是叠alpha，性能比instance好多了，虽然效果其实比不得instance，他这个实际来说丢失了每一根草的渲染能力，只能调叠层的色彩和整体调色，可能要和一根一根的草混用吧。可以看见草很矮，很密集，如果用instance来绘制的话，遭不住的。本来说写unity里的，由于three测试方便，先试试three。这是在three构建demo的代码。忽然发现这个效果很像绒毛效果。
2024-09-03 11:45:15
347
原创 URP custompass&custom render objects 下
上文 https://blog.youkuaiyun.com/qq_35158695/article/details/141708043?这里的纹理是从shader里map出来的ID，不过我看他文章没有翻到这个property,但是看起来就是这个temp这块代码把纯色绘制到了第一个FBO，在renderpass的这个configure函数里，设置render target。主要就是configure里要设置一下，然后就是可以绘制了。上次说了绘制流程，还需要指定FBO。
2024-08-30 11:56:15
332
原创 URP custompass&custom render objects
这个drawingsetting比较神秘，不知道下面实现有没有CS里根据这个剔除，不过我估计还是CPU端剔除的，哪天有机会翻翻看源码才知道了。这里要先在CS里添加一些TAG,这个TAG就是shader里那个Tags{“LightMode” = “XXX_Unlit”}上一次 custom render pass的时候，直接是quad的渲染，如果想把任意对象绘制到FBO怎么写呢。先在C#为这次渲染指定过滤器，由于要根据shader TAG，所以要在shader把TAG对上。参考这两个高手的文章，总结一下。
2024-08-30 10:03:28
604
原创 URP简洁的instance的写法
C#代码是这样的，获取一个mesh，获取每个mesh的transform，核心就完了，我这里是场景里的cube的mesh取来直接使用。看效果，最中间那个是原始cube，其他的都是instance搞出来的。材质还是要开启enable instance，这是上一次的写法。需要注意的地方是1023这个事情，可能用纹理可以绕过去。这几个宏，都要放在对的位置，才能获取正确的变量。这样创建一个空对象，把C#脚本挂上去即可。然后就是shader，有几点要注意的。最近发现更适合我个人的习惯的写法。
2024-08-29 21:18:17
571
原创 blender 快速LOD
链接：https://pan.baidu.com/s/1zOYCz6t0iOH58gfqp63Igw?通过百度网盘分享的文件：LODs Maker addons v4 - HuyKhoi2407.zip。如果需要其他细分，我感觉可以再产出的结果里，选一个，点一下。选中这个mesh，然后直接点一点，五个就出来了。发现一个插件 LODs Maker。这个使用方式也是非常的简单。这是效果，UV也算是留着的。
2024-08-28 15:25:21
653
原创 blender内置树木的UV
好像每个树枝都已经是平铺的样子了，那么如果需要改的话，就根据需求，比如把小树枝全部选上进行缩放，或者主干进行缩放即可，真不错啊。我这边的默认配置出来的树木长这样，不得不想一下，他的uv怎么展，看起来好多树。之前听说用这个内置插件可以创建树木。我尝试看了一眼默认的UV。
2024-08-20 10:04:38
417
原创 URP 2022.3 cumstom sky box
主要是shader有一点点讲究这个Tags要这么写，LOD100也要写后面。这skybox啊，分两步，创建材质，使用材质赋值到天空盒上。赋值的地方就在lighting面板。接下来就是创建这个材质了。
2024-08-18 14:16:06
332
原创 URP 2022.3 custom render pass
最下面这个add renderer feature按钮，当你完整的写完一个render feature组件后，这里是能识别到的，你点击他 下拉列表就有你刚写好的feature，所以关键就是找到你正在使用的renderer，添加你写好的render feature即可。这里有个概念上需要注意的，他这个pass啊，实际依赖问题都需要你自己在execute处理的，比如你要画N次东西，就要在execute里自己把逻辑梳理清楚，调用Blit进行绘制，然后读取，然后绘制，下面代码会有体现。所以，我们需要的物件就是。
2024-08-18 11:16:00
599
VulkanSDK.zip
2020-08-09
boost 无法使用的问题
2016-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人