Можно ли получить не предварительно умноженный цвет из шейдера рендерера? - PullRequest
Новая
       80

Можно ли получить не предварительно умноженный цвет из шейдера рендерера?

0 голосов
/ 22 октября 2018

Я использую pixi.js ver 4.8.2.Я хочу получить доступ не к предварительно умноженному цвету из шейдера рендерера в приложении pixi.js.

Я установил прозрачный 'notMultiplied', но я могу только получить доступ к предварительно умноженному цвету RGB ...

Есть ли способдоступ не умноженный цвет?

Я хочу использовать текстуру для GPGPU, поэтому я хочу получить доступ к сырой RGBA текстуре.

Я положил код и результат здесь.

// init with not multiply mode
    var app = new PIXI.Application(800, 600, {
      backgroundColor : 0xcccccc,
      transparent: 'notMultiplied'
    });
    document.body.appendChild(app.view);

    // draw circle graphics with red and alpha 0.5 ( drawn at display left )
    var graphic = new PIXI.Graphics();
    graphic.alpha = 0.5;
    graphic.beginFill(0xff0000);
    graphic.drawCircle(100,100,100);
    graphic.endFill();
    app.stage.addChild(graphic);

    // use graphics as a texture ( drawn at display right )
    var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() );
    mesh.position.set(300,100);
    app.stage.addChild(mesh);

    // replace MeshRenderer shader for test premultiply effect
    app.renderer.plugins.mesh.shader = new PIXI.Shader(
      app.renderer.gl,
      // vertex shader is same as original MeshRender's one
      ` 
          attribute vec2 aVertexPosition;
          attribute vec2 aTextureCoord;

          uniform mat3 projectionMatrix;
          uniform mat3 translationMatrix;
          uniform mat3 uTransform;

          varying vec2 vTextureCoord;

          void main(void) {
              gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
              vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;
          }
      `,

      // I changed change fragment shader for test
      `
          varying vec2 vTextureCoord;
          uniform vec4 uColor;
          uniform sampler2D uSampler;

          void main(void) {
              //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove
              gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); 
          }
      `
    );

    // render graphics and mesh.
    app.render();
<html>
    <head>

    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.js"></script>
    </body>
 </html>

Результат выполнения

Идеальный результат такой

1 Ответ

0 голосов
/ 22 октября 2018

Ваша проблема не вызвана предварительно умноженной альфой, как вы и думали.Проблема вызвана установленным вами атрибутом непрозрачности .alpha. 

graphic.alpha = 0.5;

Этот атрибут применяется (умножается) ко всем цветным каналам и альфа-каналу объекта.

Если вы не хотите, чтобы эти атрибуты влияли на красный, зеленый и синий цветовые каналы, вам нужно разделить каналы RGB на непрозрачность .alpha в фрагментном шейдере: 

varying vec2 vTextureCoord;

uniform vec4      uColor;
uniform float     uAlpha;
uniform sampler2D uSampler;

void main(void) {
    vec4 texColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor  = vec4(texColor.rgb / uAlpha, 1.0); 
}

См. Пример: 

var app = new PIXI.Application(800, 600, {
  backgroundColor : 0xcccccc,
  transparent: 'notMultiplied',
});
document.body.appendChild(app.view);

var graphic = new PIXI.Graphics();
graphic.alpha = 0.5;
graphic.beginFill(0xff0000);
graphic.drawCircle(100,100,100);
graphic.endFill();
app.stage.addChild(graphic);

var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() );
mesh.position.set(300,100);
app.stage.addChild(mesh);
app.renderer.plugins.mesh.shader = new PIXI.Shader(
  app.renderer.gl,
  ` 
    attribute vec2 aVertexPosition;
    attribute vec2 aTextureCoord;

    uniform mat3 projectionMatrix;
    uniform mat3 translationMatrix;
    uniform mat3 uTransform;

    varying vec2 vTextureCoord;

    void main(void) {
        gl_Position   = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
        vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;
    }
  `,
  `
    varying vec2 vTextureCoord;
    
    uniform vec4      uColor;
    uniform float     uAlpha;
    uniform sampler2D uSampler;

    void main(void) {
        vec4 texColor = texture2D(uSampler, vTextureCoord);
        gl_FragColor  = vec4(texColor.rgb / uAlpha, 1.0); 
    }
  `
);
app.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
...