duangsuse::Echo

#web Web Audiotool.com 某软件/游戏大佬的作品之一，太厉害了

58 viewsduangsuse, 08:27

duangsuse::Echo

#web Web Audiotool.com 某软件/游戏大佬的作品之一，太厉害了

WebAudio 相关 —抛弃python pydub啥的啦，浏览器多方便！
https://github.com/audacity/audacity/blob/master/src/effects/Wahwah.cpp#L391 freq=3.7 depth=.85 reso=3.4 哇哇
https://p5js.org/examples/sound-filter-bandpass.html 有交互创意
https://wavesurfer-js.org/example/bars/index.html 的方便波形可视化(Region循环,ELAN字幕,Bar/timeCursor/line,MediaSession)还有 marker,minimap,playhead 等超强可配置
https://collab-project.github.io/videojs-record/#/examples 的WebRTC技术音视录制工具,支持 Chromecast record(maxLength=60)saveAs()录屏和 doc.pictureInPicture Window. URL.createObjectURL(player.recordedData)
https://alemangui.github.io/pizzicato/ 的硬核声效与 WebAudio ScriptProcessor/FFT-Analyser Node IOBuffer，还有……
https://github.com/andrzejlisek/AudioSpectrum/blob/master/filter.js 地狱绘图-巨型项目-代码烂得不行

https://t.me/dsuses/5034

GitHub

audacity/Wahwah.cpp at master · audacity/audacity

Audio Editor . Contribute to audacity/audacity development by creating an account on GitHub.

60 viewsduangsuse, edited 08:28

duangsuse::Echo

https://tinyrave.com/tracks/69-ode-to-joy #signal #tool
https://www.shadertoy.com/view/XlBGzm
https://www.shadertoy.com/view/XlXSWB Praat
https://tinyrave.com/tracks/10-interstellar-theme-song 果然信号处理就是人均data转化 codegen ，啥都会啊
https://www.shadertoy.com/results?query=star 这每张都是壁纸.. #cg

https://tinyrave.com/tracks/23-wizards-and-warriors-midi-nes m

https://www.barretlee.com/blog/2014/02/28/cb-webAudio-filter/
https://www.redblobgames.com/x/1618-webaudio/ 编玩边学和解释: https://www.cnblogs.com/xy2c/p/7501327.html
#dalao https://andremichelle.io/lab/ ^大佬眼里的大佬。这个是贴图伪3D，他写了很多Flash 几何/曲线(flower,ocean,)/游戏算法(如Bezier碰撞体)，可用 ruffle.rs 试玩. 免费DAW audiotool.com 也是他写的-是的，完全和各种社区设计引擎平级的个人..
https://github.com/andremichelle
有B站号，图形和物理模拟巨佬 https://www.shadertoy.com/user/iq
两个人都看似和国内硕博一样，甚至更低端，但实则比@3b1b更稀有

https://permadi.com/java/rayc/Rayc.java ^大佬**3 ... 这是3D扫描渲染.. 图形学大佬都说excellent, 肯定非常牛逼了
https://justintaddei.github.io/webaudio/ 是简单的频谱仪

基于 tf.js 还有个 https://magenta.tensorflow.org/demos/web/ 和 softsynth.com , dgen.co
https://oosmoxiecode.com/archive/js_webgl/particles_morph/index.html
https://avseoul.net/particleEqualizer/

56 viewsduangsuse, edited 08:33

duangsuse::Echo

#learn #cg 《OpenGL杂谈》 🔬
GL提供了特殊类型 vecN (xyzw/rgba/stpq 来引用/自由重组均可;可iub前缀表示类型)和matNxM (m[i<N][j<M])以及 texture(sampler2D,xy) ，支持严格 int/float percision ，支持struct和传统C的控制流及GL特有 cube/shadow，代码的特性由 compile 环境/GL驱动决定(比如GLES就不支持break,许多不能?:和%=mod,**=pow,不同类型?:)。SL能计算frag颜色和vert点-geom顶边，对应渲染和物理计算(一个很草的事实是，基于GL计算的渲染引擎在CG界遍地开花，各有各好 🤪)

SL是没helloworld却有计算力的语言，和CSS一样，明明print都写不了却能定义动画
尽管SL能保持个buffer-state，不要尝试只用SL完成一个功能机械的app，不然就太丑了。SL适合写动态壁纸和滤镜类的东西 #建议

除了社区不重视代码质量(冗长或空语义的极端,如uv=uniform=readonly graph-arg)、不善用struct、场景与渲染不切分、和复用/可配置力问题、shader含字符位图硬编码(GLSL不擅长的用途)等人的问题，也关于计算领域 🤔

为什么GLSL看起来和C很不同？不谈多out 函数和内部gl_物理变量，显卡的计算和CPU的单线模式差异很大。比如画个圆吧，g.arc(x,y,l, 0,2PI);g.fill() 后它就出现在画布(或用SDL/VGA)上了，因为这里有个“显示缓冲”位图的概念，所有图形存留在这里直到clear-SwapBuffers(一个冷知识,glFinish计数比FPS适合图形学跑分用)，画圆可以迭代xy=(sint,cost) t=0~2PI 来累积圆上点，这个过程是线性的，多核CPU一次能画几个?尽管能LUT(查表)优化、能模拟Vec来复用同半径的结果，一次也只能画一个。对于几万个粒子来说就更鸡肋了，
因为执行顺序根本对时差更新/绘制结果毫无帮助，你逐个往画布叠对N叉 tree 好用，可对数学分形还不如把“端点迭代”完全打散，越散越适合GPU计算。

显卡计算是没有顺序和“整体图像”的，几何都必须能按xy-颜色来“绘图”，因此着色器和 Painter 完全是两种东西，当然也有办法把arc(x,y,l)->float 峰值clamp 封装成函数，并且用数学方法mix()

#define v1 float
v1 circle(vec2 P, vec2 p, v1 l) {
  v1 d = length(P - p) - l;
  return 1.-clamp(d, 0.,1.);
}
void mainImage(out vec4 bg, vec2 P){vec2 L=iResolution.xy, p=P/L;
  vec3 c = 0.5 + 0.5*cos(iTime+p.xyx+vec3(0,2,4));
  bg=vec4(mix(c, vec3(.87,.37,.23), circle(P, L/2., L.y*.3 ) ) ,1);//试给圆半径 *mod(iTime,1.)
}

矩形xywh也可用类似手段。不过shader里这些形状不是必需品(paint里确实是)

数学(此为几何相关)应用相关命名随意已经是普遍现象了，
>“ s一般用来代表一个"scalar"(标量)。所以是一维数字。t是因为字母表s后面的字母。不能继续用u和v是因为uv已经被他们用来作计算用的坐标了。因此就用了向前的字母了。(strq)淡然，后来他们发现r与rgba的r冲突了，就用p替换了r。就是stpq了。
动画工具一般用t来表示时间的概念，所以就不用s和t来表示纹理的坐标了。因此，他们就用了u和v(UV贴图)，因为他们根本不关心相关的计算。
s和t的命名来自于对平面的描述：r=r0+sv+tw (r0是平面任意一点，vw是定义向量，st随选)
uniform 意义也非常迷，它的意思是CPU和GPU间统一，许多人拿 uvec,uv 简写这ND座标/颜色/etc.,但SL里真有uvec2的类型-照传统编程早该改了,SL界硬是成了传统，想学图形先换术语，脑子里没对应表100%看不懂 😟

这是在GL(带一张 ShaderToy.com/new 贴图)显示 hello world ，带着注释里的问题阅读

float l=.06;
void mainImage(out vec4 bg, vec2 P) {
int[] t = int[](72,69,76,76,79,32, 87,79,82,76,68,33);//"Hello World"
P = P/iResolution.y - .3/*为什么能调x位置?全屏试试*/; P.y += .05*sin(3.*P.x+iTime) -.4;

for(int i=0; i<int(iMouse.x*.02)%12;i++,P.x-=.1)if (length(P-l)<l)
if(false)bg+=vec4(1)/*<能解释了吗? .5调成1.试试?>*/;else bg+= texture(iChannel0, P*.5 + fract(vec2(t[i],15-t[i]/16)/16.)).x;
}

答案：P的0值是确定点，for(i)if() 是为确定当前P对应的t[i] 。 P*.5 是因为原字体图太小了——那为啥P/2 呢？不该是有t[i]的位图yx偏移，就够在当前P画字了？作为只懂g.fillText 的程序员不会考虑怎么从像素级别对应！ P缩小了，同高区间就只含低 texture 视口，于是贴图放大了！和数学函数缩放一样。类似写法在SL里很难规避，也没法文档

SL的逻辑不能用常规迭代/判断来解释，在进入图形学公式前，需要先习惯这种思维方式。许多程序员这辈子没机会，你看到了就是有本事。所有平台,Web,Android,DX/Unity/Xorg 都支持OpenGL ，机器学习框架也开始GPU计算，不想黏合点特效装逼？看不出咋调参可不行！

你肯定会吐槽：逐点贴图？肯定很慢吧！其实GL是最快的图形方法了。计算量大但都易优化，它是很低层的绘制API，和各种层次的painter不在一条赛道
在迈向并发的时代，一头什么都会的牛和一大群只会+-*/的鸡硬件选择发展后者，应用层各有各好，但在图形上答案显然还是简单的-简单比线性好

#math 这是一个曼德博(朱丽亚)集的分形图，在SL上反而比在JS更合适，不需要手动迭代虚数P(x,y)

#define cxmul(a,b) vec2(a.x*b.x - a.y*b.y,  a.x*b.y+a.y*b.x)
#define R iResolution
//#define JulC vec2(.383,.13)
void mainImage(out vec4 bg, vec2 P){
  vec2 z,c = P/R.xy *4.-2.;  c.x=c.x* R.x/R.y +(.2-iMouse.x/R.x)*15.; c/=1.2+iMouse.y/R.y*20.; z=c;
#ifdef JulC
  c=JulC; //v 猜猜看，怎么调参数.
#endif
  float i=.0,N=abs(sin(iTime/32.0))*64.0, v;
  for(; length(z)<2. && i<N;i++)z =true? vec2(z.x*z.x-z.y*z.y, 2.*z.x*z.y)+c : cxmul(z,z) + c;
  v=i/N;
  bg = vec4(v,v,v,1);
}

这是一个”老相片“视频滤镜，展示了GL无所不能的inputs... ，猜猜它是怎么处理颜色的

void mainImage(out vec4 bg, vec2 P){
  vec2 p = P.xy / iResolution.xy;
  //p.y = 1.0 - p.y; // invert
  //p.x = 1.0 - p.x; // flip
  vec4 c = texture(iChannel0,p);
  float c0 = (c.r + c.g + c.b) / 3.0; // grayscale
  c.rgb *= abs(vec3(cos(c0),sin(c0),atan(c0) * sin(c0)) );
  bg = c;
}

以上三个示例里，大家都能感受到GLSL对向量(元组)计算帮助是很大的
应该也能感受到数学计算里不需要太多边界判断，靠sin,mod 等就能展示复杂的图形。比如这个 fireworks. fascinating graphics, made eazy, 类似的有效作品120多个
OpenGL着色器杂谈今天就到这里

ref:
https://zhuanlan.zhihu.com/p/32788146 Py julC
https://blog.csdn.net/cuckoo1/article/details/108083508 js分形
https://www.shadertoy.com/view/Wtt3Wl OTF bezier
https://www.shadertoy.com/view/XsyXzw 音乐粒子
https://www.shadertoy.com/view/7dKGDK 基础着色
https://www.cnblogs.com/chen9510/p/11447292.html UBuffer 跨着色器传递

63 viewsduangsuse, edited 18:57

duangsuse::Echo

#learn #cg 《OpenGL杂谈》 🔬 GL提供了特殊类型 vecN (xyzw/rgba/stpq 来引用/自由重组均可;可iub前缀表示类型)和matNxM (m[i<N][j<M])以及 texture(sampler2D,xy) ，支持严格 int/float percision ，支持struct和传统C的控制流及GL特有 cube/shadow，代码的特性由 compile 环境/GL驱动决定(比如GLES就不支持break,许多不能?:和%=mod,**=pow,不同类型?:)。SL能计算frag颜色和vert点…