Pixi.js: Safari에서 WebGL을 사용하여 거꾸로 렌더링

에 만든 2016년 01월 12일 · 15코멘트 · 출처: pixijs/pixi.js

안녕하세요, 상황은 다음과 같습니다.

const filmObj = _getFilmObj() /* draw obj somewhere else */
const renderer_1 = PIXI.autoDetectRenderer(width, height)
renderer_1.render(filmObj)
const filmTexture = new PIXI.Texture(new PIXI.BaseTexture(renderer_1.view))
renderer_1.destroy()

const artboardObj = new PIXI.Sprite(filmTexture)
const renderer_2 = PIXI.autoDetectRenderer(width, height)
renderer_2.render(artboardObj)
const artboardTexture =new PIXI.Texture(new PIXI.BaseTexture(renderer_2.view))
renderer_2.destroy()

/* render artboardTexture somewhere else */

Safari(iOS / Mac OS X)에서 테스트할 때 renderer_2.view 는 filmObj 에 대해 거꾸로 뒤집힌 반면 renderer_1.view 는 자연스럽습니다. renderer_2 renderer_1.view 에서 잘못된 좌표를 렌더링하는 것 같습니다. 착용한 것이 있는지 확인해 주시겠습니까?

추가 정보:

Chrome(데스크톱/모바일)에서는 모든 것이 정상입니다.
CanvasRenderer 사용하면 Safari에서도 모든 것이 정상입니다.

출처

holymonson

가장 유용한 댓글

@redsend

toDataURL 및 getImageData가 WebGL에 대한 올바른 항목을 반환한다는 보장은 없으며 표준에도 없습니다. PIXI 추출 API를 사용해야 합니다.

//if you want canvas
var canvas =renderer.extract.canvas(stage);
//if you want base64
var base64=renderer.extract.base64(stage);

ivanpopelyshev 에 2016년 09월 24일

👍6 ❤3

모든 15 댓글

Safari/Firefox/Chrome에서 테스트한 결과 아래와 같습니다.
02 01 46

holymonson 에 2016년 01월 17일

기이 한! 꼭 보세요..

GoodBoyDigital 에 2016년 02월 04일

Safari에서 캔버스가 거꾸로 뒤집히는 것과 비슷한 문제가 있는 것 같지만 Chrome에서는 올바르게 표시됩니다.

Esshahn 에 2016년 02월 05일

이제 Safari에서 baseTexture.flipY = true 설정하고 아래의 더러운 해킹을 사용하여 이를 극복합니다.

diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js
index 05258f6..82b1c84 100644
--- a/src/core/renderers/webgl/WebGLRenderer.js
+++ b/src/core/renderers/webgl/WebGLRenderer.js
@@ -396,6 +396,9 @@ WebGLRenderer.prototype.updateTexture = function (texture)

     gl.bindTexture(gl.TEXTURE_2D, texture._glTextures[gl.id]);

+    if (texture.flipY) {
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+    }
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultipliedAlpha);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);

holymonson 에 2016년 02월 05일

👍1

Sprites에 Sprites를 추가한 다음 캔버스 호출 toDataURL()에서 비슷한 문제가 있습니다. 반환된 이미지는 최신 사파리에서 수직으로 뒤집힌 반면, 구형 사파리(7.1 테스트됨)와 다른 브라우저는 뒤집히지 않은 이미지를 반환하는 것으로 보입니다. 이 문제를 해결하는 방법에 대한 제안 사항이 있습니까?

@holymonson 비슷한 행동이 있는지 알아보기 위해 이전 사파리에서 테스트할 가치가 있습니까?

vn222ay 에 2016년 02월 16일

이 문제의 원인을 찾은 사람이 있는지 궁금하십니까?

vn222ay 에 2016년 02월 26일

이 스레드가 죽지 않도록 하기 위해: 나는 그것에 대한 해결책을 찾지 못했고 강제 캔버스 렌더링으로 되돌아가야 했습니다.

Esshahn 에 2016년 02월 26일

이것은 WebGL 컨텍스트와 관련이 있을 수 있습니다. premultipliedAlpha ; 제 경우에는 premultipliedAlpha 가 두 번째 렌더러에 대해 false 경우에만 문제를 재현할 수 있습니다. 확인하려면 격리된 데모를 가져와야 합니다.

jpweeks 에 2016년 07월 21일

어떻게 그런 일이 일어날 수 있는지에 대한 아이디어가 싫지만 먼저 재현해야 합니다.

ivanpopelyshev 에 2016년 07월 21일

다음은 재현 가능한 경우입니다. Safari에서 toDataURL 로 생성된 이미지에만 영향을 줍니다.
https://jsbin.com/qivife/14/edit?js ,출력

jpweeks 에 2016년 07월 22일

이미지가 뒤집히지 않은 toDataURL API로 내보내는 방법이 있습니까?

redsend 에 2016년 09월 24일

@redsend

toDataURL 및 getImageData가 WebGL에 대한 올바른 항목을 반환한다는 보장은 없으며 표준에도 없습니다. PIXI 추출 API를 사용해야 합니다.

//if you want canvas
var canvas =renderer.extract.canvas(stage);
//if you want base64
var base64=renderer.extract.base64(stage);

ivanpopelyshev 에 2016년 09월 24일

👍6 ❤3

var base64=renderer.extract.base64(단계); 및 var 캔버스 =renderer.extract.canvas(stage); 거꾸로 된 문제를 수정하지만 캔버스의 크기가 변경되고 배경색이 지속되지 않습니다. 모든 제안

msrobot0 에 2017년 06월 12일

이미지 크기 문제를 해결하는 PIXI.RenderTexture를 사용하고 있지만 배경색이 여전히 고정되지 않습니다.

msrobot0 에 2017년 06월 12일

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

lock[bot] 에 2019년 02월 24일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Pixi.js: Safari에서 WebGL을 사용하여 거꾸로 렌더링

가장 유용한 댓글

모든 15 댓글

관련 문제