为什么 pixi.js webgl 不同于 three.js？
Why does pixi.js webgl differs from three.js?
我试过移植这个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
Why does pixi.js webgl differs from three.js?
因为它们是不同人写的不同库
它们都有不同的方式来指定属性、制服、创建纹理等...
three.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 or look through their source or examples 以弄清楚他们想要什么。
这与 React vs Vue vs Angular 没有什么不同。它们可能都建立在相同的技术上 (JS/HTML)，但是您如何使用它们来做某事却完全不同。同样，three.js 和 pixi.js 都可能碰巧使用 WebGL，但它们不是 WebGL，它们是它们自己的东西，您需要阅读它们的 docs/examples/source 以了解如何使用它们。
我试过移植这个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
Why does pixi.js webgl differs from three.js?
因为它们是不同人写的不同库
它们都有不同的方式来指定属性、制服、创建纹理等...
three.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 or look through their source or examples 以弄清楚他们想要什么。
这与 React vs Vue vs Angular 没有什么不同。它们可能都建立在相同的技术上 (JS/HTML)，但是您如何使用它们来做某事却完全不同。同样，three.js 和 pixi.js 都可能碰巧使用 WebGL，但它们不是 WebGL，它们是它们自己的东西，您需要阅读它们的 docs/examples/source 以了解如何使用它们。