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

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

I just wanted to drop in and say thanks for doing this demo! It's probably the most technically impressive WebGL usage I've seen to date, and the presentation of the different stages in addition to the very informative blog post make it a wonderful educational resource! Again, thank you!

I am curious about one performance point that you didn't mention, though: many of us (yourself included) have been bemoaning the lack of MRTs to enable advanced effects such as this. Do you have any measure of how much time in your demo is spent re-rendering the same view? I'm interested to hear what the real-world benefit of MRTs would be for a technique like this.


Sent from my iPhone

On Aug 27, 2012, at 6:18 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.

- 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/

- 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 = "" 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 = "" 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
var blob = builder.getBlob('image/jpg');
var url = "">
var image = new Image();
image.src = "">
var texture = gl.createTexture();
  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);