- 博客(454)
- 资源 (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
2297
原创 基于three.js的shader入门教程 十
threejs交流群511163089threejs交流群511163089threejs交流群511163089这是第300篇文章，咱们说点技巧吧。这个怎么做的喃 bloom就不说了 直接用的官网的那个东西。这些一蹦一跳的怎么做的喃。基于一个planebuffergeometry。interval里面更新数据就行了。这里基于plane的话，你可以在shadertoy学到神级操作。shader做了啥，就读当前像素的localY，看看是不是足够矮，高的就删除，是不是很清
2021-01-29 14:48:02
1657
原创 web端的shader效果十 three.js里shader实现钻石
光栅化实现的，样子还行，还可以加个bloom看看效果，锯齿还需想办法去掉
2021-01-14 14:12:29
1285
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
1014
原创 基于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
733
原创 基于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
794
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
719
原创 基于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
705
原创 基于three.js的shader入门教程 四
threejs交流群511163089片源着色器 uniform这种uniform变量啊 传入之后 可以在顶点着色器用 也可以在片源着色器用uniform float a;这样 就是声明变量之前加一个uniform这样在顶点或者片源着色器里面声明一下 外面再传入一个值 就可以使用了这东西有啥用?较为简单的 这个栗子 我传入了uniform vec3 a是一个1 0 0 运行...
2019-12-09 18:13:53
814
原创 基于three.js的shader入门教程 三
threejs交流群511163089片源着色器前面提了，点会三个三个的构造成三角面，这个就是给三角面上色了。有varying这种开头的变量有uniform开头的变量varying vec3 a;这种变量 是从顶点着色器传来的你需要在顶点着色器也写一句var geometry = new THREE.SphereBufferGeometry(10);var mate...
2019-11-20 17:20:55
847
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
1268
2
原创 基于three.js的shader入门教程 一
threejs交流群511163089扫盲一下shader是什么东西 这暂时不重要 这里重要的是写这个需要编程语言。threejs用的是glsl这款,语法跟C差不多。这个在web端暂时只有顶点着色器 片源着色器可以用，这俩是啥？模型是三角面构成的，每个点有个三维坐标。顶点着色器 一般是为了把你的模型的每个点投到屏幕上,上色的时候，你如果想看得见这个点，必须投到屏幕的可视坐标...
2019-11-15 08:57:38
2367
6
原创 unity记一下如何播放动画
然后把这个animation controller拖过去，拖到controller那，就over了。然后右键上一个动画，make transition连到新的动画上面。接下来给你的场景内的object添加一个animator的组件。进去之后，把三角形拖进去，就会出现一个动画，然后点击他。在左侧给他创建这么个状态名字，类型这里给bool。然后动画切回来就反过来创建transition。如果要代码切换动画，就这样写个脚本也挂到对象上。展开你的模型树，是会出现这个三角形的东西的。如果你有别的动画，就拖进来。
2024-04-14 23:25:38
313
原创 URP学习第五章 记一下源码在哪查看
D:\Unity\Project\My project\Library\PackageCache就是大部分shader了。找找他include了谁，可能多层嵌套，最顶层才有你想要的。另外有一些变量 官网有直接告诉你 也可以查看。然后有的函数你发现文件内部没有声明。可以在这里看见lighting。
2024-04-03 10:42:54
275
原创 URP学习第四章 使用raymarch
接下来打算实现一下raymarch云的效果，这个需要raymarch技术的话，首先看一下怎么在URP里搞出raymarch基本框架。首先创建一个cube,给他一个材质，一个shader，shader就主要计算一个origin 一个ray direction。然后查询如何获取世界坐标的时候，发现varying的变量不知道怎么传递，最后虽然能用了，但结论很诡异。官网文档说texcoord竟然是用来传递高精度数据的，比如position，好吧。
2024-04-02 09:57:20
225
原创 URP学习第三章使用instance
Instance绘制是比较优化的一种操作，这个后面可以搭配indirectdraw的先来学习一下URP里如何朴素的使用他。
2024-03-12 10:51:13
395
原创 URP学习第二章，如何使用shadergraph
然后自定义函数会看得见后面写了个Custom Function，打开hlsl文件查看，函数名是这样的void Raymarch_half( 这个下划线后面要写type，这是规范。然后会有一些内置变量，比如叫Scene Position的， Position，Scene Depth，Reflection Probe。基本就这样就能写了，写函数最为简单，就是手动挡，内置变量和createNode搜不到需要的东西可能需要查一下文档。这里按一下加号就能多一个变量，这就是外部输入，你在这写了，材质球那就看得见了。
2024-03-01 21:54:41
253
原创 URP学习第一章如何创建project以及使用shader
可以先建一个Shaders 一个Materials文件夹，右键create一个shader，然后create一个material简单的改一点点接下来就是学习这个shader文件的语法了，完了之后再继续看后期怎么加，比如SSR，我可能不做TAA，用FXAA。
2024-02-19 11:14:29
261
原创 U3D记录之FBX纹理丢失问题
这是unity build出webgl的样子，用的standard材质+天空盒，后面研究研究给配点景色。今天费老大劲从blender建了个模型，然后导出进去unity。这里这个模型的纹理load要改成external那个模式。然后就有了，另外这个导出还有好多选项可以康康。这个path mode要copy。然后unity加载纹理也要改设置。首先blender导出要改设置。这是blender里的样子。
2024-02-08 09:39:16
548
原创 【bitonicSort学习】
这个是用来并行排序的一个操作之前学过一些CPU排序，快排 冒泡 归并啥的，有一些能转成并行，有一些不适合像快排这种二分策略就可以考虑转一下，今天看一下这个双调排序。
2024-01-31 10:39:20
251
原创 webgl调试之排查内存泄漏
然后我们如何确认泄露了呢，我们需要把代码梳理清楚，知道哪个时机，在delete，在create，那么这个时候，按道理，delete了n个对象，create了N个对象，那么内存就是N个对象所占的，根据这个地方，你重新执行s次这个流程，看一下是否程序里只有N个对象即可。这个快照的摘要那里，点进去，谷歌里可以选择compare，那么能帮你看上一次和这次的区别，你自己也能看出来的，但是这只是告诉你某个对象泄露了，给你一点思路，具体是怎么回事，你就顺着对象的代码逻辑梳理慢慢找。就能获取一张现在的内存情况了。
2024-01-06 22:40:36
393
原创 webgpu demo阅读 A-Buffer
这个是OIT里的链表方式，说的是首先把每个像素搞一个链表，然后把深度<opaque的存起来，最后排序，然后混合。可以看到，确实是排序之后，进行mix得到最终结果，这样就可以实现透明无关排序了。这里就有这么一个depht判断。
2023-12-17 19:42:32
73
原创 rust持续学习 COW
这些例子都是这里的https://juejin.cn/post/7221969436885631033。然后还有一个from，根据描述这个自动根据数据返回给你borrow或者own的cow对象。后来了解到是clone on write 缩写的，大乌龙啊。下面这个例子就看起来显得高端一点了，从不可变变成可变的。这个有两种enum,一种是borrow，一种是own。这个是写的例子，感觉，就只是少写了个clone？这个borrow，很显然，就是不可变借用了。上面这个是读的例子，看起来蛮简单的。
2023-12-01 18:30:42
406
原创 shadow复习之planar shadow
每走一步，就能找到需要哪些tile,就能画一个FBO，然后有aabb,拿着射线直接SDF Ray march，好了，思路就是这样了，有空再写代码实现吧。这个做法的影子，精度感觉是蛮高的，不过直接多画一次，只给主角的话，也不是不行，整体场景的话，还是算了吧。那么可以经过计算得到物体的所有点投影到具体的平面的位置，这些信息，可以构造一个mesh出来。那么这里就出现一个取巧的法子，如果你只考虑投影到平面上，光源是directional的。你希望有很高的精度，就必定要用大size的图片，这显然是不太妙的。
2023-11-20 12:07:08
610
原创 rust持续学习 raw pointer 1
oh 对了，指针的获得方式就是let p = &some_value as。emmm所以知道能这样写就行，尽量别这样写。mut，原本是immutable就改成。比如上面是四个u8,可以拼一个u32。文档说这个做法不是每个机器都能移植。rust里是这么操作的。然后是函数指针这个东西。就是原本是mut就改成。
2023-11-05 22:57:55
380
原创 webgl速记之如何根据用户硬件进行性能模式OR质量模式的切换的设计思路
我遇到一个问题，我写了一份shader在不同的用户的机器上，会爆显存崩溃，我合成了几张巨大的纹理，一次上传，如果我分几个批次，就不会发生这个事情，然后性能就会相对下降。我们根据读到的字符串，检索到NVIDIA之后，再检索20 30 40这些字眼，进行区分高端机还是打火机。那么要处理这种事情，该怎么办，想了想，干脆就根据硬件级别来切换shader效果。webgl根据这个接口，还是能查看一点硬件信息的。当然，这样功能实现可能就要写几份，但没办法。
2023-10-24 16:14:10
178
原创 RUST持续学习 一点borrow问题的心得记录
这样就在外面直接light_sys.setXXXX setYYYY setZZZZ就避免了把这个light_sys传来传去。这个例子可能不太合理，但是主要就是记一下这个事情，理解这个问题，尽量避开传来传去，就能避免多次mut borrow~这里要么把lighsys传递给对应的light进行操作，要么把point传递给lightsys进行操作。写RUST的时候，我经常遇到一个报错 说哪已经mut borrow了 不能再次mut borrow。经过我的BUG体验之后，这类似的问题我算是摸清了。
2023-10-19 21:40:40
329
原创 抗锯齿的线
中间的值呢 随便一个 比如0.5/0.01大于1了就是白色，也就是刚好两头的2个像素是黑色。右下角的时候h是0,到顶部 h是1，然后中间y相距4个像素，那dy就是0.25。那么第一行以上，他的值就是[0.25 - 0.0]/0.25 = [1，0]第三行下面，他的值也是[0.25 - 0.0]/0.25 = [1，0]最后一个像素也是[0-0.01]/0.01，从上往下渐变黑色，中间一行0.5，第一行 第三行都是0.25，两端都是0。0.35/0.25，值大于1的，我们截断为1，根据插值来看 这里是。
2023-09-20 15:25:17
268
原创 rust持续学习 Fn FnMut FnOnce
如果执行test(f)这里会发生move，把f直接move了，Once的意思就清晰了，你既然已经move进去test里了，那么test结束的时候 f 就不复存在了，所以就只能一次，就Once了。如果f里发生了s.push_str(“7”)那么明显 这个时候发生了MUT!只需要把Fn改成FnMut。另外一个操作是Once。Fn是啥，普通的一款。
2023-09-08 11:17:13
462
原创 web3d调试
这时候了解到了PIX RenderDoc这种也能调浏览器，不过他会把画canvas以外的也抓住，看的时候有点费劲。然后我查API，发现有个api用来query timestamp，然后兴致冲冲的把他写好了。然后我去搜了一下谷歌，结果前面某个版本把这个功能去掉了，也就是没法用了。然后发现报错需要开谷歌的一个设置，而且要在谷歌运行加命令行参数。我希望看见某个shader的执行耗时，这个无法做到诶。web里嘛，Spector当然是首选。但是也没办法，总比没有好。然后我就加了，继续报错。
2023-08-25 10:26:15
88
原创 CubeMap convert into Octahedral思路
看了一些介绍，大多都是如何采样Octahedral的，那么如何把cubemap转成为这个呢。好了 cube该怎么转过去呢，那当然是把这个逻辑沿用，拿到uv,然后给该像素点赋值就好。direction怎么拿，球体的uv就是经纬度，直接转一下就行了。那么入参对于球来说其实就是direction。然后这里采样颜色，是不是从八面体纹理采样。这个逻辑大家搜一下，有很多大佬分享了的。是不是要有对应的uv。
2023-08-07 20:47:25
138
原创 rust持续学习 get_or_insert_with
然后翻了一下代码，是来自option.rs，原来就是空则赋值，这个写法对我来说蛮新奇的。感觉这个名字蛮奇怪的 insert。忽然今天看见一段代码。
2023-08-04 09:21:05
1004
原创 webgpu之旅05
主体就是这样更新粒子的，还有个probablityMap.cs可以看看。这里是着色部分，看起来没什么特别的，接下来看cs部分。演示了一个粒子如何用cs动起来。
2023-08-02 09:57:08
119
原创 rust持续学习Box::leak
写一个函数，想要真的返回全局变量，感觉用这个是个好的做法。这个函数的功能是消费box返回一个全局变量！Box就是unique_ptr。这样就能当真拿到这个全局变量了。还有一种是lazy macro。
2023-07-23 09:29:21
630
原创 rust持续学习 iterator
他会实现IntoIterator 这个trait的，然后这个IntoIter的next实现的最下面的else指针地址+1。会调这个看起来就是访问下一个字符,咋去到下一个的呢这个slice::Iter struct内部是有ptr,end俩成员的。然后这个要some.into_iter().map(xxx).collect比较常见。如果直接some.into_iter().sum()这种函数所有权会直接无了。网上找来一段对Chars的实现里。需要实现next方法给他。
2023-07-16 08:53:56
919
原创 rust持续学习 声明宏
理解下来基本用法就是这个，匹配替换，但是还需要深入理解一下各种metavariable究竟怎么定义的。这有个需要注意的地方，$input只有ident,tt,lifetime可以传递出去。这个就是匹配括号里的内容多次并替换为后面的括号里的逻辑，然后把东西push进去vec。返回Recurrence 的那里，mem匹配多次inits得到0,1，next_val 求值那里ind，seq的类型要ident才能通过。学习记录，都是学自圣经，macrobook啥的。第二个例子，在第一个宏调用另外的宏，
2023-06-27 09:55:20
343
原创 初探AST
然后这些字符 挨个 出栈，拼成tree，其实就是AST雏形了。1 * 2 + (10 - 2) * 5这个式子。如果转逆波兰表达式最终结果是什么。
2023-06-21 17:17:44
49
VulkanSDK.zip
2020-08-09
boost 无法使用的问题
2016-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人