[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [Public WebGL] Issues while doing my last demo



On Mon, Aug 27, 2012 at 6:14 AM, Florian Bösch <pyalot@gmail.com> wrote:
> I've released my latest demo (global illumination via deferred irradiance
> volumes)
> http://codeflow.org/entries/2012/aug/25/webgl-deferred-irradiance-volumes/
>
> During development (2 1/2 weeks) I discovered a few issues.
>
> Bugs:
> - Firefox preserve drawing buffer false clear bug
> https://bugzilla.mozilla.org/show_bug.cgi?id=785838
> - unrolling in angle for d3d gives trouble (2 minute compile time until
> error): https://bugzilla.mozilla.org/show_bug.cgi?id=785848
> - preprocessor issue with FXAA 3.11 (works fine on linux/osx but fails on
> angle d3d, no bug ticket yet, still waiting for feedback):
> http://codeflow.org/issues/preprocessor-problem/
>
> Slowness:
> - gl.clear on front is very slow
> - Shader compile times are very long (a simple shader takes 11ms to compile,
> FXAA takes 66ms to compile, times go up significantly on windows)
> - early-Z does not seem to work (things got faster *after* adding discard,
> which disables early-Z) which would be rather important for deferred
> shading.
>
> API Issues:
> - gl.clear is clamped to the range 0-1, which does not allow you to clear an
> FBO attached floating point texture, and instead you'll have to create a
> shader and splat a quad and set the desired color by passing in a uniform to
> be passed on to gl_FragColor
>
> - Working with packed image data (dozens or hundreds of images intended to
> upload into webgl) is very cumbersome, see code below:
>
>         // Assuming some large source buffer in data:
> var data = new ArrayBuffer(...); // comes from an XHR
> var storage = new ArrayBuffer(desired_size); // ArrayBufferView.set to read
> beyond the desired size
> var dst = new Uint8Array(storage); // can't call set on array buffer
> var src = new Uint8Array(data, desired_offset, desired_size); // can't pass
> array buffer to set
> dst.set(src); // copy
> dst = dst.buffer; // can't pass view to blob builder, also need to prevent
> BlobBuilder to read the entire buffer
> var builder = new BlobBuilder(); // using (deprecated) blob builder because
> neither FF nor chrome accepts either arrybuffer or arrayview in new Blob()
> constructor
> builder.append(dst);
> var blob = builder.getBlob('image/jpg');
> var url = URL.createObjectURL(blob);
> var image = new Image();
> image.src = url;
> var texture = gl.createTexture();
> image.onload = function(){
>   gl.activeTexture(0);
>   gl.bindTexture(gl.TEXTURE_2D, texture);
>   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
> image);
> }
>
> Ideally that should work more like:
>
> var data = Image.decodeBytes('image/jpg', array_buffer_view); // array
> buffer
> gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA,
> gl.UNSIGNED_BYTE, data);

Nice demo and writeup! Kudos for making the source code available.
Thanks also for the conformance test covering the reserved identifier
issue in the shader preprocessor.

Could you not use ArrayBuffer.slice() to simplify your blob
construction code above? I only tested Chrome and Firefox but it looks
like it is implemented in both.

-Ken

-----------------------------------------------------------
You are currently subscribed to public_webgl@khronos.org.
To unsubscribe, send an email to majordomo@khronos.org with
the following command in the body of your email:
unsubscribe public_webgl
-----------------------------------------------------------