亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

將紋理傳遞給 PIXI.js 中的片段著色器

將紋理傳遞給 PIXI.js 中的片段著色器

蕪湖不蕪 2023-03-24 17:18:19
如何使用 PIXI.js 在片段著色器中傳遞和混合紋理？我有這樣的制服：uniforms = {      uResolution: new PIXI.Point(800, 600),      texture: { value: new PIXI.Texture.from('img link here')}    }我有這個片段著色器：#ifdef GL_ESprecision mediump float;#endif// Uniforms from Javascriptuniform vec2 uResolution;uniform float uScrollProgress;// The texture is defined by PixiJSvarying vec2 vTextureCoord;uniform sampler2D uSampler;uniform sampler2D texture;void main() {  // Normalized coordinates  vec2 uv = gl_FragCoord.xy / uResolution.xy;  vec4 pixel = texture2D(texture, vTextureCoord);  gl_FragColor = pixel;}我應該在片段著色器中做什么，例如，在屏幕上繪制我的紋理？我現在的例子有一個錯誤：Uncaught TypeError: texture.castToBaseTexture is not a function
查看完整描述

2 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

您的著色器正在嘗試讀取名為的紋理uSampler，但您從未創建過該統一名稱。相反，您命名了您的 uniform texture，它永遠不會在您的著色器代碼中調用。看起來簡單地重命名你的制服就可以解決你的問題：


uniforms = {

     uResolution: new PIXI.Point(800, 600),

     uSampler: new PIXI.Texture.from('img link here')

}


查看完整回答
反對 回復 2023-03-24
?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

這是 Pixi.js 在著色器內渲染紋理的示例


// Create a pixi instance

const app = new PIXI.Application({ width: 800, height: 800 });

document.body.appendChild(app.view);

// Create the container that we will apply the shader to

var container = new PIXI.Container();

app.stage.addChild(container);



// Bring in some images

const spriteForShader = new PIXI.Sprite.from('https://assets.codepen.io/292864/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1&width=512')

// This image is a random image from imgur (which has CORS enabled so Codepen can grab it)

const skyrimComic = new PIXI.Sprite.from('https://i.imgur.com/6BheBL1.jpeg')

// Note: The container must be rendering something in order for the shader to show,

// which is why we add this sprite to it.  It is a different sprite than spriteForShader

// to prove that the shader is rendering the spriteForShader ONLY via the texture uniform

// and not because it's a child.  Try removing the filter to see what it looks like without the

// shader applied

container.addChild(skyrimComic);


var shaderCode = `

  varying vec2 vTextureCoord;

  uniform sampler2D uTexture;


  void main(void) {

    gl_FragColor = texture2D(uTexture, vTextureCoord);

    // Set the red to 0 just to show that the shader is having an effect

    // this will make the texture render without any red

    gl_FragColor.r = 0.0;

  }

`;

var uniforms = {

      // Pass the texture to the shader uniform

      // "uTexture" could be named whatever you want

      uTexture: spriteForShader.texture

}

var simpleShader = new PIXI.Filter('',shaderCode,uniforms);

container.filters = [simpleShader]

看到它在 Codepen 上工作


你的問題是你傳遞的是一個內部有紋理的對象，而不是紋理。


分享

編輯

跟隨

2022 年 7 月 25 日 15:44編輯

這是 Pixi.js 在著色器內渲染紋理的示例


// Create a pixi instance

const app = new PIXI.Application({ width: 800, height: 800 });

document.body.appendChild(app.view);

// Create the container that we will apply the shader to

var container = new PIXI.Container();

app.stage.addChild(container);



// Bring in some images

const spriteForShader = new PIXI.Sprite.from('https://assets.codepen.io/292864/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1&width=512')

// This image is a random image from imgur (which has CORS enabled so Codepen can grab it)

const skyrimComic = new PIXI.Sprite.from('https://i.imgur.com/6BheBL1.jpeg')

// Note: The container must be rendering something in order for the shader to show,

// which is why we add this sprite to it.  It is a different sprite than spriteForShader

// to prove that the shader is rendering the spriteForShader ONLY via the texture uniform

// and not because it's a child.  Try removing the filter to see what it looks like without the

// shader applied

container.addChild(skyrimComic);


var shaderCode = `

  varying vec2 vTextureCoord;

  uniform sampler2D uTexture;


  void main(void) {

    gl_FragColor = texture2D(uTexture, vTextureCoord);

    // Set the red to 0 just to show that the shader is having an effect

    // this will make the texture render without any red

    gl_FragColor.r = 0.0;

  }

`;

var uniforms = {

      // Pass the texture to the shader uniform

      // "uTexture" could be named whatever you want

      uTexture: spriteForShader.texture

}

var simpleShader = new PIXI.Filter('',shaderCode,uniforms);

container.filters = [simpleShader]

看到它在 Codepen 上工作


你的問題是你傳遞的是一個內部有紋理的對象，而不是紋理。


分享

編輯

跟隨

2022 年 7 月 25 日 15:44編輯

 

這是 Pixi.js 在著色器內渲染紋理的示例


// Create a pixi instance

const app = new PIXI.Application({ width: 800, height: 800 });

document.body.appendChild(app.view);

// Create the container that we will apply the shader to

var container = new PIXI.Container();

app.stage.addChild(container);



// Bring in some images

const spriteForShader = new PIXI.Sprite.from('https://assets.codepen.io/292864/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1&width=512')

// This image is a random image from imgur (which has CORS enabled so Codepen can grab it)

const skyrimComic = new PIXI.Sprite.from('https://i.imgur.com/6BheBL1.jpeg')

// Note: The container must be rendering something in order for the shader to show,

// which is why we add this sprite to it.  It is a different sprite than spriteForShader

// to prove that the shader is rendering the spriteForShader ONLY via the texture uniform

// and not because it's a child.  Try removing the filter to see what it looks like without the

// shader applied

container.addChild(skyrimComic);


var shaderCode = `

  varying vec2 vTextureCoord;

  uniform sampler2D uTexture;


  void main(void) {

    gl_FragColor = texture2D(uTexture, vTextureCoord);

    // Set the red to 0 just to show that the shader is having an effect

    // this will make the texture render without any red

    gl_FragColor.r = 0.0;

  }

`;

var uniforms = {

      // Pass the texture to the shader uniform

      // "uTexture" could be named whatever you want

      uTexture: spriteForShader.texture

}

var simpleShader = new PIXI.Filter('',shaderCode,uniforms);

container.filters = [simpleShader]

看到它在 Codepen 上工作


你的問題是你傳遞的是一個內部有紋理的對象，而不是紋理。


分享

編輯

跟隨

2022 年 7 月 25 日 15:44編輯

  

這是 Pixi.js 在著色器內渲染紋理的示例


// Create a pixi instance

const app = new PIXI.Application({ width: 800, height: 800 });

document.body.appendChild(app.view);

// Create the container that we will apply the shader to

var container = new PIXI.Container();

app.stage.addChild(container);



// Bring in some images

const spriteForShader = new PIXI.Sprite.from('https://assets.codepen.io/292864/internal/avatars/users/default.png?fit=crop&format=auto&height=512&version=1&width=512')

// This image is a random image from imgur (which has CORS enabled so Codepen can grab it)

const skyrimComic = new PIXI.Sprite.from('https://i.imgur.com/6BheBL1.jpeg')

// Note: The container must be rendering something in order for the shader to show,

// which is why we add this sprite to it.  It is a different sprite than spriteForShader

// to prove that the shader is rendering the spriteForShader ONLY via the texture uniform

// and not because it's a child.  Try removing the filter to see what it looks like without the

// shader applied

container.addChild(skyrimComic);


var shaderCode = `

  varying vec2 vTextureCoord;

  uniform sampler2D uTexture;


  void main(void) {

    gl_FragColor = texture2D(uTexture, vTextureCoord);

    // Set the red to 0 just to show that the shader is having an effect

    // this will make the texture render without any red

    gl_FragColor.r = 0.0;

  }

`;

var uniforms = {

      // Pass the texture to the shader uniform

      // "uTexture" could be named whatever you want

      uTexture: spriteForShader.texture

}

var simpleShader = new PIXI.Filter('',shaderCode,uniforms);

container.filters = [simpleShader]

看到它在 Codepen 上工作


你的問題是你傳遞的是一個內部有紋理的對象，而不是紋理。


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     

查看完整回答
反對 回復 2023-03-24
  • 2 回答
  • 0 關注
  • 281 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號