时间戳

首页 > 解决方案 > 如何在 PIXI.JS 的过滤器或片段着色器中更新时间统一？

javascript - 如何在 PIXI.JS 的过滤器或片段着色器中更新时间统一？

问题描述

我在一个基本上将整个容器设置为红色的图像精灵上使用了 PIXI.JS 中的片段着色器或过滤器。通过time制服将所有内容设置为黑色，而不是在红色和黑色之间更改颜色。关于为什么它没有按预期更新的任何提示？

谢谢！

import * as PIXI from 'pixi.js';

// Variables
const width = window.innerWidth, height = window.innerHeight;
let uniforms = {
  time: {
    type: 'f',
    value: 0
  }
};

// Fragment shader
const frag = /*glsl*/`
  precision mediump float;

  uniform float time;

  void main() {
    float t = sin(time);
    gl_FragColor = vec4(t, 0.0, 0.0, 1.0);
  }
`;

// Create renderer
const renderer = new PIXI.Renderer({
  width,
  height
});
const stage = new PIXI.Container();
// Add renderer to DOM
document.body.appendChild(renderer.view);

// Create image sprite from texture
const texture = PIXI.Texture.from('path-to-image');
const image = new PIXI.Sprite(texture);
image.position.set(width / 2, height / 2);
image.scale.set(0.5);
image.anchor.set(0.5, 0.5);
// Add sprite to stage/scene
stage.addChild(image);

// Create ticker
const ticker = new PIXI.Ticker();
ticker.add(animate);
ticker.start();

// Animates renderer
function animate() {
  filter.uniforms.time.value += 1/60;
  renderer.render(stage);
}

// Create filter that adds fragment shader
let filter = new PIXI.Filter(null, frag, uniforms);
image.filters = [ filter ];

标签： javascriptpixi.js

解决方案

1.5 年后我遇到了这个确切的问题。

对我来说，解决方案是不将制服设置为对象。似乎 PIXI 在这里即时处理了一些转换。尝试替换以下

let uniforms = {
  time: {
    type: 'f',
    value: 0
  }
};

简单地

let uniforms = {
  time: 0 // or 0.0
};

在此处查看使用制服的完整示例

推荐阅读