我对PIXI.js和自定义着色器都是陌生的,所以在这里我的深度有点儿。。
有一个GLSL着色器(由DonKarlssonSan提供),我想转换为PIXI.js来比较性能,任何帮助将不胜感激!
顶点着色器:
void main() { gl_Position = vec4(position, 1.0); }
片段着色器:
uniform vec2 iResolution; uniform float iGlobalTime; vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); } float snoise(vec2 v){ const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy) ); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m*m ; m = m*m ; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } void main(void) { vec2 uv = gl_FragCoord.xy / iResolution.xy; float xnoise = snoise(vec2(uv.x, iGlobalTime / 5.0 + 10000.0)); float ynoise = snoise(vec2(uv.y, iGlobalTime / 5.0 + 500.0)); vec2 t = vec2(xnoise, ynoise); float s1 = snoise(uv + t / 2.0 + snoise(uv + snoise(uv + t/3.0) / 5.0)); float s2 = snoise(uv + snoise(uv + s1) / 7.0); vec3 hsv = vec3(s1, 1.0, 1.0-s2); vec3 rgb = hsv2rgb(hsv); gl_FragColor = vec4(rgb, 1.0); }
JSFiddle:https://jsfiddle.net/9t0ayrmh/1/
*到目前为止,如果需要,我可以发表我的努力,但实际上包括一个具有全部功能的PIXI.js模板,但是我不足以将着色器连接到滤镜。
谢谢!
我对PIXI.js和自定义着色器都是陌生的,所以在这里我的意思有点深。有一个GLSL着色器(由DonKarlssonSan提供),我想将其转换为PIXI.js以比较性能,任何.. 。
不需要转换GLSL代码。您可以使用完全相同的着色器。只需创建PIXI.Filter
并设置制服PIXI.Filter
和iResolution
的值即可。滤波器必须应用于iGlobalTime
。例如: