如何解决为什么pixi.js webgl与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,256.0/2.)).r
);
}
</script>
我收到错误消息“ castToBaseTexture不是函数”
这是4年前在pixi中所做的,但是在pixi 4和5中不再起作用。 https://github.com/ENAML/pixi-alpha-video
解决方法
为什么pixi.js webgl与three.js不同?
因为它们是由不同的人编写的不同的库
他们都有不同的方式来指定属性,制服,创建纹理等...
Three.js中使用的名称,例如projectionMatrix
,modelViewMatrix
,position
,uv
,vUv
,normal
,{{1 }},vNormal
等都是three.js选择的名称,它们可能已经命名为vColor
,foo
,moo
,bar
等它们不再是WebGL的一部分,而您在JavaScript中声明的变量不再是JavaScript的一部分。
WebGL定义的唯一变量以banana
和gl_
之类的gl_Position
开头。所有其他变量都是用户定义的,在这种情况下,用户是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来了解如何使用它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。