将 THREE.js 着色器转换为 PIXI.js

Question

我对 PIXI.js 和自定义着色器都很陌生，所以这里有点超出我的深度..

有一个 GLSL 着色器（由 DonKarlssonSan 提供），我想将其转换为 PIXI.js 以比较性能，非常感谢任何帮助！

var container;
var camera, scene, renderer;
var uniforms;
var startTime;

init();
animate();

function init() {
  container = document.getElementById('container');

  startTime = Date.now();
  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry(16, 9);

  uniforms = {
    iGlobalTime: { type: "f", value: 1.0 },
    iResolution: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {

    uniforms: uniforms,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent

  } );

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer();
  container.appendChild(renderer.domElement);

  onWindowResize();

  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize(event) {
  uniforms.iResolution.value.x = window.innerWidth;
  uniforms.iResolution.value.y = window.innerHeight;

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var currentTime = Date.now();
  uniforms.iGlobalTime.value = (currentTime - startTime) * 0.0005;
  renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

<div id="container"></div>

<script id="vertexShader" type="x-shader/x-vertex">
void main() { gl_Position = vec4(position, 1.0); }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
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);
}
</script>

JSFiddle： https://jsfiddle.net/9t0ayrmh/1/

*如果需要，我可以发布我目前所做的工作，但基本上包含一个功能齐全的 PIXI.js 模板，但是将着色器连接到过滤器是我的不足之处。

谢谢！

Answer 1

GLSL 代码无需转换。您可以使用完全相同的着色器。只需创建一个PIXI.Filter 并设置制服iResolution 和iGlobalTime 的值。过滤器必须应用于PIXI.Container。例如：

let app = new PIXI.Application({width : window.innerWidth, height : window.innerHeight});
app.resizeTo = window;

let fragmentShader = document.getElementById('fragmentShader').textContent;

let filter = new PIXI.Filter(null, fragmentShader);
filter.uniforms.iResolution = [app.screen.width, app.screen.height];
filter.uniforms.iGlobalTime = 0.0;

let container = new PIXI.Container();
container.filterArea = app.screen;
container.filters = [filter];

app.stage.addChild(container);
document.body.appendChild(app.view);

注意，顶点着色器可以跳过，因为过滤器的默认顶点着色器可以很好地完成这项工作。

时间统一（iGlobalTime）的动画和更新，与THREE.js中的更新对应更新非常相似。例如：

startTime = Date.now();
app.ticker.add(function(delta) {
    var currentTime = Date.now();
    filter.uniforms.iGlobalTime = (currentTime - startTime) * 0.0005;
});

查看示例 (Pixi v5.1.5)：

var app = new PIXI.Application({width : window.innerWidth, height : window.innerHeight});
app.resizeTo = window;

let fragmentShader = document.getElementById('fragmentShader').textContent;

let filter = new PIXI.Filter(null, fragmentShader);
filter.uniforms.iResolution = [app.screen.width, app.screen.height];
filter.uniforms.iGlobalTime = 0.0;

let container = new PIXI.Container();
container.filterArea = app.screen;
container.filters = [filter];

app.stage.addChild(container);
document.getElementById('container').appendChild(app.view);

function onresize(event) {
    if (app.resize)
        app.resize();
    container.filterArea = app.screen;
    filter.uniforms.iResolution = [app.screen.width, app.screen.height];
}
window.addEventListener('resize', onresize, false);

startTime = Date.now();
app.ticker.add(function(delta) {
    var currentTime = Date.now();
    filter.uniforms.iGlobalTime = (currentTime - startTime) * 0.0005;
});

html, body { margin: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
<div id="container"></div>

<script id="fragmentShader" type="x-shader/x-fragment">
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);
}
</script>