WebGL에서 투명 텍스처로 이상한 렌더링 동작

Question

Haxe + Away3D를 사용하여 작은 행성 생성기를 작성하고 HTML5/WebGL에 배포했습니다. 하지만 구름을 렌더링 할 때 이상한 문제가 있습니다. 나는 행성의 메쉬를 가지고 있고, 구름은 같은 위치에서 조금 더 크게 메쉬를 칠한다.

나는 perlin 노이즈 함수를 사용하여 행성 기능과 구름 형성을 생성하고이를 비트 맵에 쓰고 비트 맵을 텍스처로 적용합니다. 이제, 이상하게 때이 iOS 또는 C++/OSX이를 배포, 내가 그것을 정확히 원하는 렌더링 :

이제

, 나는 WebGL을에 배포 할 때, 그것은 동일한 확산 맵을 생성하지만 렌더링 로 :

(위 인해 내가 페이지를 다시로드하고 얼마나 자주에, 훨씬 낮은 해상도로했다 문제는 높은 해상도에서 지속되었다..) 구름이

거기, 그리고 가장자리는 알맞고, 희미하고 반투명하게 보입니다. 그러나 내부는 불투명하고 겉으로보기에는 다르게 렌더링됩니다 (각 픽셀은 같은 색으로 알파 채널 만 변경됨)

나는 이것이 코드가 궁극적으로 컴파일/생성 된 방법과 관련이 있다는 것을 알고 있지만 렌더링 설정이나 블렌딩 모드와 같이 단순하지는 않습니다. 그러나 내가 무슨 일이 일어나고 있는지 정확히 알지 못하기 때문에 어디를보아야할지 모를 것입니다.

생성되는 확산 맵은 다음과 같습니다. 나는 구름을 볼 수 있도록 붉은 색으로 입혔다.

Answer 1

Bitmapdata.perlinNoise는 HTML5에서 작동하지 않습니다. 직접 구현해야하며 미리 렌더링 된 이미지를 사용할 수도 있습니다.

https://github.com/openfl/openfl/blob/c072a98a3c6699f4d334dacd783be947db9cf63a/openfl/display/BitmapData.hx

    public function perlinNoise (baseX:Float, baseY:Float, numOctaves:UInt, randomSeed:Int, stitch:Bool, fractalNoise:Bool, channelOptions:UInt = 7, grayScale:Bool = false, offsets:Array = null):Void { 

     openfl.Lib.notImplemented ("BitmapData.perlinNoise"); 

    } 

또한, WebGL이 인스펙터는 WebGL이 응용 프로그램을 디버깅에 매우 유용합니다. 그것을 사용 했습니까?

http://benvanik.github.io/WebGL-Inspector/

Answer 2

그럼, 그럼, 당신은이 ByteArray에서 해당 이미지를 업로드 했습니까? 라임은 배열 인덱스 연산자가있는 ByteArray에 한 번 액세스 할 수 있지만 js에는 없어야합니다. 이것은 실수를 피하기 위해 라임의 최신 버전에서 수정되었습니다. 바이트 배열에 액세스하려면 [] 대신 __get 및 __set 메서드를 사용했습니다.

사용하는 대상에 따라 다른 소스 파일에서 백엔드 코드가 생성되기 때문에 Away3d 자체가이 문제의 원인 일 수 있습니다. 예를 들어, Texture.uploadFromByteArray의 byteArrayOffset 매개 변수는 html5에서 지원되지만 네이티브에서는 지원되지 않습니다.

away3d가 문제의 원인 인 경우 코드의 어느 부분에서 문제가 발생합니까? 나는 지금 확실하지 않다.

EDIT : OpenFL의 최신 WebGL 백엔드에서도 문제가 발생했습니다. 레거시 OpenFL에는이 문제가 없다고 생각합니다.OpenFL의 스프라이트 렌더러가 내 지식없이 colorMask (그리고 아마도 다른 OpenGL 렌더링 상태)를 변경하고있었습니다! 내 코드와 OpenFL의 스프라이트 렌더러가 실제로 동일한 OpenGL 컨텍스트를 사용했기 때문에이 문제가 발생했습니다. OpenFL의 스프라이트 렌더러를 수동으로 비활성화하여이 문제를 해결했습니다.