为什么 pixi.js webgl 与 three.js 不同？答案

【问题标题】：Why does pixi.js webgl differs from three.js?为什么 pixi.js webgl 与 three.js 不同？
【发布时间】：2021-01-17 16:37:30
【问题描述】：

我已经尝试移植这个https://codepen.io/jhnsnc/pen/qPZvvM 到 pixi 但没有成功。

到目前为止我尝试过的如下

let video   = document.createElement("video");
video.src   = videoUrl;
video.loop  = true;
video.muted = true;
var videoTexture = PIXI.Texture.fromVideo(video);
let uniforms = {
   time: { type: "f", value: 1.0 },
   texture: { type: "sampler2D", value: videoTexture }
};
this.videoSprite = new PIXI.Sprite(videoTexture);
this.videoSprite.filters = [new PIXI.Filter(document.getElementById( 'vertexShader' ).textContent,document.getElementById( 'fragmentShader' ).textContent,uniforms)]

<script id="vertexShader" type="x-shader/x-vertex">
// varying vec2 vUv;
void main()
{
    // vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

uniform float time;
uniform sampler2D texture;
// varying vec2 vUv;

void main( void ) {
  gl_FragColor = vec4(
    texture2D(textureA, vec2(512.0, 0.5 + 256.0/2.)).rgb,
    texture2D(textureA, vec2(512.0, 256.0/2.)).r
  );
}
</script>

我收到错误“castToBaseTexture 不是函数”

这是 4 年前在 pixi 中的做法，但在 pixi 4 和 5 中不再适用。 https://github.com/ENAML/pixi-alpha-video

【问题讨论】：

挖掘你链接的源代码，the vertex shader 看起来你必须声明attribute vec2 aTextureCoord; 而不是仅仅假设uv 已经存在。 Three.js 使用ShaderMaterial 自动为您执行此操作，但这并不意味着 Pixi.js 必须遵循相同的约定。我建议您尽可能关注the way they do it。

标签： three.js shader webgl pixi.js

【解决方案1】：

为什么 pixi.js webgl 与 three.js 不同？

因为它们是不同人编写的不同库

他们都有不同的方式来指定属性、制服、创建纹理等......

三个.js中使用的名称如projectionMatrix、modelViewMatrix、position、uv、vUv、normal、vNormal、vColor等都是由three.js，它们可能被命名为 foo、moo、bar、banana 等。它们不再是 WebGL 的一部分，就像您在 JavaScript 中声明的变量是 JavaScript 的一部分一样。

WebGL 定义的唯一变量以gl_ 开头，例如gl_Position 和gl_FragColor。所有其他变量都是用户定义的，在这种情况下，用户是 three.js 和 pixi.js 的开发者

如果您想在另一个库 (pixi.js) 中使用为一个库 (three.js) 设计的着色器。您需要通读 the docs 并查找该特定库决定为其所有变量命名的内容。

此外，您为这些变量提供值的方式完全由这些库的创建者定义。您可能需要设置属性、缓冲区、纹理、制服，每个库中的设置方式会有所不同。同样，您需要阅读 their docs 或查看 their source 或 examples 以了解他们想要什么。

这与 React vs Vue vs Angular 没什么不同。它们可能都建立在相同的技术（JS/HTML）上，但是你如何使用它们来做某事是完全不同的。同样，three.js 和 pixi.js 都可能碰巧使用 WebGL，但它们不是 WebGL，它们是它们自己的东西，您需要阅读它们的 docs/examples/source 以了解如何使用它们。

【讨论】：