3

I've been writing a little planet generator using Haxe + Away3D, and deploying to HTML5/WebGL. But I'm having a strange issue when rendering my clouds. I have the planet mesh, and then the clouds mesh slightly bigger in the same position.

I'm using a perlin noise function to generate the planetary features and the cloud formations, writing them to a bitmap and applying the bitmap as the texture. Now, strangely, when I deploy this to iOS or C++/OSX, it renders exactly how I wanted it to:

The good

Now, when I deploy to WebGL, it generates an identical diffuse map, but renders as:

The bad & the ugly

(The above was at a much lower resolution, due to how often I was reloading the page. The problem persisted at higher resolutions.)

The clouds are there, and the edges look alright, wispy and translucent. But the inside is opaque and seemingly being rendered differently (each pixel is the same color, only the alpha channel is changed)

I realize this is likely something to do with how the code is ultimately compiled/generated in haxe, but I'm hoping it's something simple like a render setting or blending mode I'm not setting. But since I'm not even sure exactly what is happening, I wouldn't know where to look.

Here's the diffuse map being produced. I overlaid it on red so the clouds would be viewable.

Clouds

Community
  • 1
  • 1
Shadda
  • 103
  • 7
  • Do you think your generated colour values are overflowing past 255,255,255? Maybe this behaves differently in the compiled JS. Can you ensure that each pixel colour value is clamped to 0..255? – pixelmike Oct 23 '14 at 20:42
  • I checked that, but I'm clamping all values to 1.0 (255). I even dumped each pixel and grep'd. – Shadda Oct 24 '14 at 23:46

2 Answers2

0

Bitmapdata.perlinNoise does not work on html5. You should implement it by yourself, or you could use 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");

    }

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

Also, WebGL-Inspector is very useful for debugging WebGL apps. Have you used it?

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

vroad
  • 1
  • 1
  • Unfortunately this is not my issue. My perlin noise is hand-made, not using a builtin. I noticed my images are broken, though, so let me fix those. If you have any other ideas :) Oh, and didn't know about the inspector, thank you. – Shadda Nov 22 '14 at 02:57
0

Well, then, did you upload that image from ByteArray? Lime once allowed access ByteArray with array index operator, even though it shouldn't on js. This is fixed in the lastest version of Lime to avoid mistakes. I used __get and __set method instead of [] to access a byte array.

Away3d itself might be the cause of this issue too, because the code of backend is generated from different source files depending on the target you use. For example, byteArrayOffset parameter of Texture.uploadFromByteArray is supported on html5, but not on native.

If away3d is the cause of the problem, which part of the code is causing the problem? I'm not sure for now.

EDIT: I've also experienced a problem with OpenFL's latest WebGL backend. I think legacy OpenFL doesn't have this problem. OpenFL's sprite renderer was changing colorMask (and possibly other OpenGL render states) without my knowledge! This problem occured because my code and OpenFL's sprite renderer was actually using the same OpenGL context. I got rid of this problem by manually disabling OpenFL's sprite renderer.

vroad
  • 1
  • 1