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

[Public WebGL] Issues while doing my last demo



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