WebGL中具有透明纹理的奇怪渲染行为

Question

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

我正在使用perlin噪声函数来生成行星特征和云层，将它们写入位图并将位图应用为纹理。现在，奇怪的是，当我将其部署到iOS或C ++ / OSX时，它完全按照我想要的方式呈现：

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

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

云层在那里，边缘看起来很好，纤细而半透明。但内部是不透明的，看起来呈现出不同的颜色（每个像素都是相同的颜色，只有alpha通道被更改）

我意识到这可能与代码最终在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/

Answer 2

那么，你是否从ByteArray上传了那张图片？ Lime曾经允许使用数组索引运算符访问ByteArray，即使它不应该在js上。这是在最新版本的Lime中修复的，以避免错误。 我使用__get和__set方法代替[]来访问字节数组。

Away3d本身也可能是导致此问题的原因，因为后端代码是根据您使用的目标从不同的源文件生成的。 例如，html5支持Texture.uploadFromByteArray的byteArrayOffset参数，但不支持原生。

如果off3d是导致问题的原因，那么代码的哪一部分会导致问题？我现在不确定。

编辑：我也遇到过OpenFL最新的WebGL后端问题。我认为传统的OpenFL没有这个问题。在我不知情的情况下，OpenFL的sprite渲染器正在改变colorMask（可能还有其他OpenGL渲染状态）！出现此问题是因为我的代码和OpenFL的sprite渲染器实际上使用的是相同的OpenGL上下文。我通过手动禁用OpenFL的sprite渲染器来解决这个问题。