That was painful; hopefully since now it should be easier to have it in every WebGL example.
It's enough to add one line (ideally as the first thing that gets executed):
if ( ! THREE.Supports.webgl ) THREE.Supports.addGetWebGLMessage();
This will add message box with default styling centered near top of the window. Optional parameters "parent" and "id" can be specified for further customization and integration with the document, also message DOM element is returned for easier access.
var messageElement = THREE.Supports.addGetWebGLMessage( { parent: container, id: "my_message" } );
By default, message is added to document.body and has id "oldie" (can be styled with CSS).
Created "THREE.Supports" object, which should centralize this stuff. So far it detects <canvas>, WebGL and WebWorkers; later it could detect for example GPU capabilities.
Not sure about name or location, but it's pretty tiring go through all examples when something changes, so it should be somewhere in the library.
Code duplication is bad: even html snippets with error message should be centralized somewhere, so that when new browsers arrive we wouldn't have to keep changing them in many places.
This is to be able to control depth buffer writing / testing on per geometry chunk level (before it was possible just to hack it on per scene level via exposed GL context).
Disabling depth test is useful for example for additively blended particles, handling of transparency or for having background textured quad.
Another option would be to have it on per object level, but then this could prevent different handling of objects with both transparent and opaque parts.
Also in this commit:
- more progress towards mesh vertex colors
- less matrix multiplications in render call
- fixed ugly bug in doubleSided / flipSided handling
- cleanup of materials
- added a lot of missing stuff in debug strings and parameters handlers
- normal and depth materials now have opacity parameter
- wrote comments for non-obvious things
Renamed: setClearColor( hex, opacity ) => setClearColorHex( hex, opacity )
New: setClearColor( color, opacity )
In this way it's a bit cheaper to animate clear color.
Hope I didn't break examples - I searched for "setClearColor" and changed it in one place where it was used.
Work in progress, caveats:
- sort happens just inside one ParticleSystems, so everything gets messed up when more ParticleSystems are in the same screen space
- not yet solved proper order of operations, if you change object transform, you need to update ParticleSystem object matrix manually before rendering (so that sort works, otherwise it will use transform from previous frame)
Also fixed transparency in fog and did small optimizations in WebGLRenderer.
It works more or less the same as lines:
- particles are passed to ParticleSystem object as geometry
- material is ParticleBasicMaterial (textures should be supported, not tested yet)
- geometry can be updated by setting "__dirtyVertices" property of the geometry
This should be the last place where new arrays were created in "render".
Chrome memory now seems stable.
Firefox still grows like mad, though this used to be like this also with other demos (simply setting random values to existing arrays does this).
Seems like Mozilla folks themselves struggle with this:
http://www.flickr.com/photos/11280278@N04/5363335103/in/photostream/
For the moment just things that are executed every frame in WebGLRenderer.render.
Continuing with quest to minimize creation of new data structures. Should instead create per class/object structures and just reuse them (as gman does in ThreeD). Main goal is to avoid annoying garbage collection pauses.
Let's hope it didn't break something (could be if some code was dependent on cloning of return values of "flatten" or "makeInvert3x3", though from what I checked these are just used to set typed arrays uniforms).
Testing on current examples didn't show any noticeable performance degradation when enabling / disabling culling for every object in every frame.
"FlipSided" property could be probably done in very similar way, just setting "gl.frontFace( gl.CCW )" or "gl.frontFace( gl.CW )"
For this had to extend WebGLRenderer a bit:
- MeshShaderMaterial now can take non-specific float array uniforms as "fv1"
(there is already "fv" type for array of 3-item-vectors, which probably should be renamed to "fv3" to be consistent)
- render method has yet another parameter "clear" for clearing newly set framebuffer (defaults to true).
This is a bit hackish but it seems necessary to control this somehow. I didn't manage to replicate
desired behavior just with autoClear.
- another dirty thing is accessing GL context from the application side:
renderer.context.disable( renderer.context.DEPTH_TEST );
This should be refactored somehow, wrapped in some API call.
Rendering proper 3d object into the texture uncovered another issue - framebuffer had to be cleared after switching.
Texture is still flipped :( (original scene has small red torus on the top)
This is proving to be rather tricky. Yet again I tried to handle image coordinate mess in a proper way (UNPACK_FLIP_Y_WEBGL as texture parameter and non-inverted UVs), fixing hacks across the codebase.
This did indeed help with render-to-texture flipping, but instead it created really ugly problems with both normal map and minecraft AO demos. So back to square one :(
Had to set viewport to make it work in OpenGL.
Also made it easier to see texture orientation in the example.
Now it's visible that there is indeed flipping. At least now it's consistent ;).
alteredq
Mr.doob