webgl - WebGL 中透明纹理的奇怪渲染行为

Question

我一直在使用 Haxe + Away3D 编写一个小型行星生成器，并将其部署到 HTML5/WebGL。但是在渲染云时我遇到了一个奇怪的问题。我有行星网格，然后云网格在相同位置稍大一些。

我正在使用柏林噪声函数生成行星特征和云层，将它们写入位图并将位图应用为纹理。现在，奇怪的是，当我将它部署到 iOS 或 C++/OSX 时，它呈现的正是我想要的样子:

现在，当我部署到 WebGL 时，它会生成一个相同的漫反射贴图，但呈现为:

(由于我重新加载页面的频率，上面的分辨率要低得多。问题在更高的分辨率下仍然存在。)

云在那里，边缘看起来不错，纤细且半透明。但是内部是不透明的并且看起来渲染不同(每个像素都是相同的颜色，只是改变了 alpha channel )

我意识到这可能与最终在 haxe 中编译/生成代码的方式有关，但我希望它是一些简单的东西，比如我没有设置的渲染设置或混合模式。但由于我什至不确定到底发生了什么，我不知道去哪里看。

这是正在生成的漫反射贴图。我把它覆盖在红色上，这样云就可以看到了。

Answer 1

Bitmapdata.perlinNoise 不适用于 html5。你应该自己实现它，或者你可以使用预渲染图像。

    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");

    }

<罢工> https://github.com/openfl/openfl/blob/c072a98a3c6699f4d334dacd783be947db9cf63a/openfl/display/BitmapData.hx

此外，WebGL-Inspector 对于调试 WebGL 应用程序非常有用。你用过吗？

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