在WebGL中，透明纹理的渲染行为异常

Question

我正在使用Haxe + Away3D编写一个小型行星生成器，将其部署到HTML5/WebGL上。但当我渲染云层时遇到了一个奇怪的问题。我有一个行星网格和一个略大的云网格在同一位置。

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

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

云在那里，边缘看起来不错，薄而半透明。但内部是不透明的，似乎被以不同的方式呈现（每个像素的颜色相同，只有alpha通道改变）

我意识到这可能与代码在Haxe中最终编译/生成的方式有关，但我希望这只是一些简单的渲染设置或混合模式我没有设置。但是，因为我甚至不确定发生了什么，我不知道该去哪里找答案。

以下是生成的漫反射贴图。我将其叠加在红色上，以便可以查看云：

- Shadda

---

你认为生成的颜色值是否超过了 255,255,255？也许这在编译后的 JS 中会有所不同。你能确保每个像素的颜色值被夹在 0 到 255 之间吗？ - pixelmike

我已经检查过了，但是我将所有值都限制在1.0（255）之内。我甚至转储了每个像素并进行了grep操作。 - Shadda

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/

- vroad

---

不幸的是这不是我的问题。我的柏林噪声是手工制作的，而不是使用内置函数。我注意到我的图像有问题，所以让我修复一下。如果您有其他想法：）哦，而且不知道检查器，谢谢。 - Shadda

Answer 2

那么，你是从ByteArray上传了那张图片吗？ Lime曾经允许使用数组索引运算符访问ByteArray，尽管在js上不应该这样做。为了避免错误，在最新版本的Lime中已经修复了这个问题。 我使用__get和__set方法来访问字节数组，而不是使用[]。

Away3d本身也可能是这个问题的原因，因为后端代码的生成取决于您使用的目标不同的源文件。 例如，Texture.uploadFromByteArray的byteArrayOffset参数在html5上受支持，但在native上不受支持。

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

编辑：我也遇到了OpenFL最新的WebGL后端的问题。我认为旧版的OpenFL没有这个问题。OpenFL的精灵渲染器在没有我的知识下更改了colorMask（可能还有其他OpenGL渲染状态）！这个问题发生是因为我的代码和OpenFL的精灵渲染器实际上使用了相同的OpenGL上下文。我通过手动禁用OpenFL的精灵渲染器解决了这个问题。

- vroad