Strange rendering behavior with transparent texture in WebGL
I was writing a small planet generator using Haxe + Away3D and deployment to HTML5 / WebGL. But I am having a weird problem when rendering my clouds. I have a planetary mesh and then the clouds get in the way a little more in the same position.
I am using the perlin noise function to generate planetary functions and cloud formations by writing them to a bitmap and applying the bitmap as a texture. Now, oddly enough, when I deploy this to iOS or C ++ / OSX, it shows exactly how I wanted:
Now when I deploy to WebGL it generates an identical diffuse map, but displays as:
(The above was at a much lower resolution due to how often I reloaded the page. The problem persisted at higher resolutions.)
The clouds are there and the edges look good, thin and translucent. But inside it is opaque and seemingly rendered differently (each pixel has the same color, only the alpha channel changes)
I realize this is likely to do with how the code is ultimately compiled / generated in haxe, but I hope it will be something as simple as a render setting or blend mode that I am not configuring. But since I'm not even sure what's going on, I don't know where to look.
This is where a diffuse map is created. I have overlaid it with red so the clouds can be visible.
source to share
Bitmapdata.perlinNoise doesn't work for html5. You have to implement it yourself or use a pre-rendered image.
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");
}
In addition, the WebGL-Inspector is very useful for debugging WebGL applications. Have you used it?
source to share
So have you loaded this image from the ByteArray? Redundant once allowed ByteArray access with array index operator, although it shouldn't be on js. This has been fixed in the latest version of Lime to avoid bugs. I have used the __get and __set method instead of [] to access the byte array.
Away3d itself can also be the cause of this issue, as the backend code is generated from different source files depending on the target you are using. For example, the byteArrayOffset parameter for Texture.uploadFromByteArray is supported in html5 but not native.
If away3d is causing the problem, which part of the code is causing the problem? I'm not sure yet.
EDIT: I also had a problem with the latest version of WebFL OpenFL. I think legacy OpenFL doesn't have this problem. The OpenFL sprite renderer changed colorMask (and possibly other OpenGL rendering states) without my knowledge! This issue came about because my code and OpenFL sprite rendering were actually using the same OpenGL context. I got rid of this problem by manually disabling OpenFL rendering rendering.
source to share