Pixi.js: PIXI가 사용자 정의 셰이더 코드에서 필터를 생성하지 못함

예제는 저에게 효과적입니다. 어떤 브라우저에서 테스트하고 있습니까?

Google 크롬 버전 62.0.3202.94(공식 빌드)(64비트)

Firefox Quantum 57.0(64비트)

OS: 우분투 17.10 교묘한

@dobi 좋은 캐치! 네, 최적화가 뭔가를 제거했는데(샘플러에 걸림돌) 우리는 그것을 확인하는 것을 잊었습니다.

지금은 샘플러를 사용하지 않고 필터가 필요하다고 확신하십니까? 어떤 경우에는 https://github.com/pixijs/pixi-plugin-example 과 같은 렌더러 플러그인을 만드는 것이 더 낫습니까?

오늘 두 번째로 v4에 셰이더와 필터가 엉망이 된 점 죄송합니다. v5에서 수정하겠습니다.

솔직히 말해서, 나는 아직 이 주제에 대해 깊이 파고 들지 않았습니다. 요전에 그 기능을 실험해보고 싶었습니다. 렌더러 플러그인 접근 방식으로 몇 가지 테스트를 수행합니다. 힌트를 주셔서 감사합니다.

v5에 대한 ETA가 이미 있습니까?

2개월 정도 :)

필터에 대한 많은 트릭이 있습니다. 그래서 제가 그 기사를 만들었습니다: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

@ivanpopelyshev 튜토리얼에 따라 동일한 문제가 발생했습니다.
저는 pixi.js에 정말 해키 패치를 적용하여 저에게 적합하게 만들었습니다.

diff --git a/js/pixi.js b/js/pixi.js
index 363f09c..d0a321b 100644
--- a/js/pixi.js
+++ b/js/pixi.js
@@ -2344,6 +2344,9 @@ VertexArrayObject.prototype.activate = function()
  */
 VertexArrayObject.prototype.addAttribute = function(buffer, attribute, type, normalized, stride, start)
 {
+  if (!attribute) {
+    return this;
+  }
     this.attributes.push({
         buffer:     buffer,
         attribute:  attribute,

이것이 해결책이 아니라는 것을 알고 있지만 v5가 나올 때까지 v4의 셰이더 코드를 사용할 수 있습니다. (아마도 더 나은 수정으로) :)

좋은 해킹이야!

별도의 js 파일로 이동할 수 있습니다.

PIXI.glCore.VertexArrayObject.prototype.addAttribute = ...

나는 같은 문제가있다. 또한 Ubuntu 17.10 artful. 셰이더는 Pixi.js에서 전혀 안정적입니까? 프로덕션에 사용할 수 있습니까? 픽셀 셰이더를 가져오려면 어떻게 합니까?

필터로 또는 렌더러 플러그인으로. 그들은 안정적이지만 webgl과 pixi 아키텍처에 대한 진지한 지식이 필요합니다.

https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters
https://github.com/pixijs/pixi-plugin-example/

N 번째로 나는 사람들에게 v5에서 더 쉬울 것이라고 확신합니다.

const filterCode = `void main(){
   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}`;
const filter = new PIXI.Filter(null, filterCode);
someSprite.filters = [filter];

이 많은 코드로 인해 이 오류가 발생합니다. 필터의 다른 생성자를 사용해야 할까요? 아니면 null을 무언가로 대체해야합니까?

필터의 경우 텍스처 좌표와 샘플러를 사용해야 합니다. 그렇지 않으면 FilterManager가 속성의 위치를 ​​가져오지 못합니다.

렌더러 플러그인에는 해당 요구 사항이 없습니다. 시도해 보십시오. 예, 큰 상용구입니다.

시도해보십시오: https://github.com/TazOen/createShaderPlugin . 그러나 텍스처를 무시하고 bindTexture 가 없습니다. 텍스처가 필요한 경우 전체 pixi-plugin-example을 사용하십시오.

텍스처 좌표와 "샘플러"가 필요하다고 합니다. 샘플인가 샘플러인가? 오타?
나는 예제의 도움으로 작동하도록 관리했습니다. 감사하지만. 이 페이지에서 이러한 세부 정보를 언급하지 않는 이유는 무엇입니까?
http://pixijs.io/examples/#/basics/custom -filter.js

샘플러. 그러나 그 유니폼과 나는 누군가가 그것을 그리워하지 않을 것이라고 생각합니다. 우리의 문제는 속성에 관한 것입니다.

덕분에 가능합니다 :) https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters#cannot -read-property-location-of-undefined

아, 그랬구나. 위키를 놓쳤습니다.

덕분에 되네요

방금 추가했습니다.

또한 필터 마우스 데모에 알림이 추가되었습니다. v4에서는 문제를 해결할 수 없습니다. 우리는 v5에서 그것에 대해 뭔가를 할 것입니다.

FilterManager에 필요한 속성 중 일부가 셰이더에서 사용되지 않을 때 나타납니다.

거기에 이러한 속성을 나열하는 것은 어떻습니까?

aTextureCoord -> vTextureCoord 속성만

이것은 매우 이상해지고 있습니다.
이 코드는 잘 작동합니다.

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;
uniform vec4 uTextureClamp;
uniform vec4 uColor;

void main(void)
{
    gl_FragColor = texture2D(uSampler, vTextureCoord);
    gl_FragColor.r = 0.0;
    gl_FragColor.g = 0.0;
    gl_FragColor.b = 0.0;
}

하지만 gl_FragColor.a = 0.0; 를 끝에 추가하면 Cannot read property 'location' of undefined 됩니다. 최대 4개 중 3개만 변경할 수 있는 것 같습니다. 이게 뭔가요? 뭐가 잘못 되었 니?

@germansokolov13 이 행동은 완전히 이해가 됩니다. 생각 해보세요:
원래 게시물에서 언급했듯이 이 오류는 glsify가 셰이더 코드를 최적화하기 때문에 발생합니다.

당신이 추가하면 gl_FragColor.a = 0.0; 가에 전화를 최적화 할 수 있습니다 texture2D 가 완전히 덮어 쓰기됩니다 원인,하지만 때까지에서 알파 채널을 소요 texture2D

glsify가 texture2D에 대한 호출을 최적화하면 webgl은 uSampler 대한 메모리를 할당하지 않으므로 pixi가 해당 유니폼에 데이터를 업로드하려고 할 때 실패합니다. 할당된 공간이 없기 때문입니다.

몇 가지 옵션이 있습니다.

• (지금은) 내가 했던 것과 동일한 해킹을 적용합니다. 기본적으로 데이터를 업로드하기 전에 속성이 할당되었는지 확인합니다.
• uSampler를 사용하여 glsify가 최적화하지 않도록 합니다.
• 또는 v5를 기다리십시오.

이것이 도움이 되기를 바랍니다.

잘 잡았습니다, @doebi!

또는 렌더러 플러그인을 사용하십시오.

오, 이제 알았다! Pixi.js의 다음 마이너 릴리스에 Doebi의 패치를 추가해야 할까요? PR을 작성해야 하나요?

예, 홍보하지만 다른 장소입니다.

https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/utils/Quad.js#L93
https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/FilterManager.js#L242

메서드를 재정의하고 FilterManager에서 사용되는 추가 클래스를 제안합니다.

안녕하세요,
내 셰이더 코드에 비슷한 문제가 있습니다. 더 큰 커널과 약간의 가우스 변수 변형이 있는 기본 BlurYFilter 셰이더 코드의 변형이므로 작동하지 않는 이유를 완전히 모르겠습니다.

테스트한 한 Windows, MacOS 및 Android에서는 잘 작동하며 iOS에서만 문제가 있습니다.
다음은 셰이더 코드입니다.
꼭지점:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[15];
void main(void){
   gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
   vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -7.0 * strength);
   vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -6.0 * strength);
   vBlurTexCoords[2] = aTextureCoord + vec2(0.0, -5.0 * strength);
   vBlurTexCoords[3] = aTextureCoord + vec2(0.0, -4.0 * strength);
   vBlurTexCoords[4] = aTextureCoord + vec2(0.0, -3.0 * strength);
   vBlurTexCoords[5] = aTextureCoord + vec2(0.0, -2.0 * strength);
   vBlurTexCoords[6] = aTextureCoord + vec2(0.0, -1.0 * strength);
   vBlurTexCoords[7] = aTextureCoord + vec2(0.0, 0.0 * strength);
   vBlurTexCoords[8] = aTextureCoord + vec2(0.0, 1.0 * strength);
   vBlurTexCoords[9] = aTextureCoord + vec2(0.0, 2.0 * strength);
   vBlurTexCoords[10] = aTextureCoord + vec2(0.0, 3.0 * strength);
   vBlurTexCoords[11] = aTextureCoord + vec2(0.0, 4.0 * strength);
   vBlurTexCoords[12] = aTextureCoord + vec2(0.0, 5.0 * strength);
   vBlurTexCoords[13] = aTextureCoord + vec2(0.0, 6.0 * strength);
   vBlurTexCoords[14] = aTextureCoord + vec2(0.0, 7.0 * strength);
}

파편:

varying vec2 vBlurTexCoords[15];
uniform sampler2D uSampler;
void main(void){
   gl_FragColor = vec4(0.0);
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.013068780984604511;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[5]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[6]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[7]) * 0.2062265415448454;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[8]) * 0.163461199220823;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[9]) * 0.10421702583793174;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[10]) * 0.05603114255667656;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[11]) * 0.028762309061254498;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[12]) * 0.017439264394216315;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[13]) * 0.013907007172070673;
   gl_FragColor += texture2D(uSampler, vBlurTexCoords[14]) * 0.013068780984604511;
}

비교를 위해 여기에 기본 BlurYFilter의 셰이더가 있습니다.
초록:

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float strength;
uniform mat3 projectionMatrix;
varying vec2 vBlurTexCoords[5];
void main(void)
{
  gl_Position = vec4((projectionMatrix * vec3((aVertexPosition), 1.0)).xy, 0.0, 1.0);
  vBlurTexCoords[0] = aTextureCoord + vec2(0.0, -2.0 * strength);
  vBlurTexCoords[1] = aTextureCoord + vec2(0.0, -1.0 * strength);
  vBlurTexCoords[2] = aTextureCoord + vec2(0.0, 0.0 * strength);
  vBlurTexCoords[3] = aTextureCoord + vec2(0.0, 1.0 * strength);
  vBlurTexCoords[4] = aTextureCoord + vec2(0.0, 2.0 * strength);

}

파편:

varying vec2 vBlurTexCoords[5];
uniform sampler2D uSampler;
void main(void)
{
    gl_FragColor = vec4(0.0);
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[0]) * 0.153388;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[1]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[2]) * 0.250301;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[3]) * 0.221461;
    gl_FragColor += texture2D(uSampler, vBlurTexCoords[4]) * 0.153388;

}

왜 이것이 잘못될 수 있는지 아는 사람이 있습니까?

@tyleet 같은 문제가 확실합니까? 콘솔에 무엇이 보이나요?

편집하다:
신경 쓰지 마세요. 문제를 찾았습니다. 커널 크기 15는 iOS에 너무 많은 것 같습니다. 커널 크기를 7로 줄이면 제대로 작동합니다.

<-----원본--------->
안녕하세요,
답변이 늦어 죄송합니다. 주말에 스크린샷을 찍지 못했습니다. 같은 줄에서 실패한 것처럼 보입니다. "속성"이 정의되지 않았습니다. 다음은 원격 콘솔의 스크린샷입니다.

@ivanpopelyshev 다른 사람들이 유사한 문제로 워밍업하지 못하도록 이 문제를 닫아야 합니까?
v5에서 수정될 것이라는 약속을 받았기 때문에 더 이상 문제로 생각하지 않습니다.

@doebi 닫습니다.

@tyleet 텍스처에서 가져온 샘플 수는 시스템마다 제한될 수 있습니다.

이 스레드는 닫힌 후 최근 활동이 없었기 때문에 자동으로 잠겼습니다. 관련 버그에 대한 새 문제를 여십시오.