As suspected, this was caused by incorrect shader state management when switching between multiple shaders (thanks Firefox for verbose warnings).
Also, testing WebGL performance is very tricky. You can get different performance depending on the state of browsers / system (messed up state can be 10-66% slower):
1. freshly started Chrome can be much faster than Chrome that already ran few WebGL demos (which are now closed)
2. demo opened in new Chrome tab can be faster than demo reloaded in the same tab
3. even demos opened and closed in Firefox can slow down Chrome demos
This suggests that browsers do not clean GPU state properly :(
2d texture encapsulates bitmap, wrapping and minifying/magnification parameters.
Which reminds me, maybe also minifying/magnification options should be parameters in Texture object.
Though as defaults are "best" (LINEAR / LINEAR_MIPMAP_LINEAR = trilinear filtering), this would make sense just for special use cases like when trying to achieve "retro" look (like in Minecraft, http://gregs-blog.com/2008/01/14/how-to-turn-off-bilinear-filtering-in-opengl/ ;).
Not anymore automatic, but also much less wasteful.
Has to be called in tandem with scene object removal:
scene.removeObject( object );
webglRenderer.removeObject( scene, object );
The order of render passes is now following:
1. opaque materials with normal blending
2. opaque materials with additive blending
3. opaque materials with subtractive blending
4. transparent materials with additive blending
5. transparent materials with subtractive blending
6. transparent materials with normal blending
With growing number of passes it's possible it may be worth to do some pre-sorting, though it would have to be tested.
Current way is fairly cheap as if there are no corresponding materials in the pass, for loops just blast through (potentially many very cheap operations).
Pre-sorting would mean creating arrays on the fly in each frame (one expensive operation with effect on garbage collection, which especially Firefox is currently very bad at).
Also moved loadImageArray utility function from examples into TextureCube.js
To be used like this:
var urls = [ "px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg" ];
var images = THREE.loadImageArray( urls );
var textureCube = new THREE.TextureCube( images );
// create scene
var objectMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff, env_map: textureCube } )
createScene( objectMaterial );
// create panorama
var size = 100000;
var panoMaterial = new THREE.MeshCubeMaterial( { env_map: textureCube } );
var mesh = new THREE.Mesh( new Cube( size, size, size, 1, 1, null, true ), panoMaterial );
sceneCube.addObject( mesh );
Warning: this functionality is currently changing a lot, expect things to get broken before stabilization.
This commit has handful of things going on:
- had to sacrifice one light to please ANGLE, making it again up to 4 instead of up to 5 total lights :(
- Basic / Lambert / Phong materials now have new parameters:
"combine": THREE.Mix | THREE.Multiply [default]
- tells how to combine environment map with the original material:
- "Multiply" creates chrome-like metallic look (it's what was already there),
color of the underlying material is multiplied with the environment map,
this creates different colored metals
- "Mix" creates shiny plastic look
color of the underlying material is lerped with the environment map,
amount of the contribution from the environment map is controlled
by another new parameter "reflectivity"
"reflectivity": <float> [from <0.0, 1.0>]
- controls mixing of underlying material and environment map for "Mix" combine mode
0: pure underlying material, zero contribution from environment map (Basic/Lambert/Phong)
1: pure environment map, zero contribution from underlying material (uncolored chrome look)
"refraction_ratio": <float>
- controls refractive mapping, ratio of the index of refraction in the medium containing the incident ray
to that of the medium being entered
- sensible values seem to be from ~0.6 - 1.0
(in theory, e.g. air/glass should be 0.75, but this looks weird, values between 0.9 - 1.0 give the most interesting results,
though maybe there is bug somewhere in my code)
- for use refraction mapping, just add parameter to TextureCube like this (default is reflection mapping)
"new THREE.TextureCube( images, THREE.RefractionMap )"
Mr.doob
alteredq