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.
Requires to turn off mipmapping to be able to use non-power of two texture.
Effect of texture size on performance is noticeable, also there is no antialiasing (default in Chrome is I think 4x multisampling).
So I guess full-screen postprocessing will be quite costly :(. That's the price of WebGL always running at full-blown high resolution.
This could be somehow mitigated by faking lower resolutions via smaller texture, though I guess it still wouldn't be the same as having lower resolution set by GPU driver (this is a major help with performance in games - I never run full 1680 x 1050).
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 ;).
If you want to refresh VBOs (and thus have geometry changes reflected in renderer), you need to set dirty flags on geometry object.
There are separate flags for different buffers (as not always all buffers need to be updated and oh my is updating costly):
mesh.geometry.__dirtyVertices = true;
mesh.geometry.__dirtyNormals = true;
mesh.geometry.__dirtyUvs = true;
mesh.geometry.__dirtyTangents = true;
mesh.geometry.__dirtyElements = true;
That was quite tough feature, a lot of refactoring, yet performance is still quite bad :(
The biggest remaining bottleneck seems to be translation between Three.js internal data formats and buffers. I removed as much per-frame arrays creation as I could, but even just iterating through existing data and setting of values is still very costly. Also per-frame normals computation is expensive.
Unfortunately performance issues are still there and now already trickled down also to dev channel :(
I wonder what they did - fps numbers look more or less ok, problem is more with subtle yet very annoying choppiness. Like if somewhere suddenly bandwidth / memory is getting trashed.
Also first time I noticed issues with stats widget in latest Chrome canary 10.0.624.0 / Chromium continuous build 10.0.629.0:
- it doesn't show in demos with mixed canvas / WebGL content (OBJ converter demo, lights test)
- simply just adding it can significantly decrease performance (OBJ converter demo is choppy when invisible stats element exists)
- in some demos it has different transparency (Walt cubemap demo)
Looks like with some Chrome update in last few days we hit some new compositing or 2d canvas issue (both OpenGL and ANGLE versions share the same issues).
As expected, performance of one-to-one conversion from CanvasRenderer was horrible, so I had to change a bit how lines are handled.
Line object now has "type" property:
- default type is "THREE.LineContinuous" which should behave as before: geometry represents one continuous line (v0 ... vn)
- new option is "THREE.LinePieces" which tells renderer that geometry represents collection of individual line segments (v0,v1) ... (vn-1, vn)
(one Line object corresponds to one VBO)
(same limitations as with meshes - once VBO is baked, no changes are possible except object transforms - scale / rotation / position)
loader.loadAscii and loader.loadBinary now take just one parameter with following properties:
- model (required)
- callback (required)
- texture_path (optional: if not specified, textures will be assumed to be in the same folder as JS model file)
- bin_path (optional: if not specified, binary file will be assumed to be in the same folder as JS model file)
Example use:
loader.loadBinary( { model: "model.js", bin_path: "path/bin", texture_path: "path/img",
callback: function( geometry ) { createScene( geometry ) } } );
Code is still rough around edges (it can be made nicer), though it should already produce one-to-one results with ubershader.
Side-effect is that scene is no longer required as WebGLRenderer constructor parameter. Shader programs are now constructed upon first frame render and only then scene lights are examined.
Also changed MeshShaderMaterial demos to show how to use cloning. For these particular demos uniforms cloning is not really necessary as they use only one instance of shader material, but for example, if there were two normal mapped models in one scene, each model would need separate material with own uniforms.
For the moment, only one type of fog is baked into shader, depending on scene.fog initial value.
If use case arise for dynamic fog type switching, this could be changed, though than both fogs would need to be computed all the time :S.
Diffuse map and ambient occlusion maps are now optional in normal map shader.
By default, both are disabled, so they need to be enabled explicitly like this:
uniforms[ "enableAO" ].value = true;
uniforms[ "enableDiffuse" ].value = true;
Mr.doob
alteredq
Szymon Nowak
Alex Schworer