This allows to work around ANGLE antialiasing issue appearing when compositing WebGL framebuffer with transparent background color with HTML canvas element background (while keeping antialiasing on).
WebGLRenderer constructor now takes JSON object with few optional parameters:
renderer = new THREE.WebGLRenderer { scene: scene,
antialias: true,
clearColor: 0x000000,
clearAlpha: 0 };
Here is how to change clear color in runtime:
renderer.setClearColor( 0xff0000, 1 );
Eventually I'll have to continue in the experimental branch. Want to give it a go to the ColorPass/TexturePass material API. The color + map + env_map setup feels too limiting...
Now that I have more knowledge of WebGL and shaders, this is how the ColorPass/TexturePass API looks like:
var material = [
new THREE.MeshLambertMaterial( [
new THREE.ColorPass( 0xff0000, 1, THREE.NormalBlending ),
new THREE.TexturePass( new Texture( <image>, new THREE.UVMapping() ), 0.5, THREE.NormalBlending ),
new THREE.TexturePass( new Texture( [ <image>, <image>, <image>, <image>, <image>, <image> ], new THREE.CubeRefractionMapping() ), 1, THREE.SubtractiveBlending ),
new THREE.ColorPass( 0x0000ff, 1, THREE.AdditiveBlending )
], { blending: THREE.NormalBlending } ),
new THREE.MeshBasicMaterial( [
new THREE.ColorPass( 0xff0000, 1 ),
], { blending: THREE.AdditiveBlending, wireframe: true } ),
new THREE.MeshPhongMaterial( [
new THREE.ColorPass( 0xff0000, 1 ),
], { ambient: 0x000000, specular: 0xbbaa99, shininess: 50, blending: THREE.NormalBlending } );
];
Makes things a bit longer but I think it's more intuitive this way (and pretty powerful). However, the simplest material would be like this:
var material = new THREE.MeshBasicMaterial( new THREE.ColorPass( 0xff0000 ) );
Mhh... Now I don't know whether they should called `*Pass`, or `*Layer`...
This is a workaround for Chrome ANGLE antialiasing issue manifested in geometry_terrain_fog demo:
http://twitpic.com/3iftyh
Problem happens in Chrome ANGLE when geometry is rendered with the same color as canvas background - then instead of expected nothing to be seen, there is a faint white outline at geometry borders.
This issue is not specific to fog, even just rendering geometry with MeshBasicMaterial having the same color as background produces the same outline.
TODO: create isolated test case and file ANGLE / Chromium bug.
For the moment, it works just on Basic / Lambert / Phong materials.
Fog must be added to the scene before initialization of WebGLRenderer and scene must be passed to WebGLRenderer constructor (like for lights).
I don't know yet how to solve properly MeshShaderMaterial & co :(
Instant performance boost in all cube mapping demos ;)
With panoramas there were insane amounts of unnecessary computations done in fragment shader - basically every pixel on the screen was computing the whole ubershader - ouch ouch ouch!
This was the lowest hanging fruit, still some more performance can be gained by removing other stuff from ubershader.
Big thanks to mrdoob for starting to question sanity of ubershader ;)
For some reason it doesn't work with the current Chrome canary (10.0.607.0) when using ANGLE :(.
Also OBJ converter demo is having problems with generated tiled texture in latest canary, so it looks like some bug was introduced in ANGLE's handling of UVs (baked AO relies on "zoomed" UVs).
Need to investigate more, maybe file a bug report.
WebGLRenderer2: Trying to re-create WebGLRenderer from scratch... Creating a program per material instead of just one for everything. Seems to be 3x faster by now...
A lot of things going on in this commit:
- added tangents computation for geometries
- mesh must have UV coordinates
- to be called explicitly once geometry is loaded like this: geometry.computeTangents()
- tangents are stored in Vertex objects
- quads are not solved properly (though workaround hack seems to work at least somehow, as far as each vertex appears at least somewhere)
- extended VBOs in WebGLRenderer to include tangent streams (when available)
- added "normal" shader to ShaderUtils (to be used with MeshShaderMaterial)
- Blinn-Phong with one directional and one point light (7 varyings gone, just one spare)
- normal maps are in tangent space
- displacement maps use simple luminance value (could be changed if better precision is needed)
- displacement mapping uses vertex texture fetch
- this requires GPU with Shader Model 3.0
- not currently supported in ANGLE
- for this, added "supportsVertexTextures" method to WebGLRenderer API, so that application can handle this
Firefox doesn't like Typed Array constructors without explicit sizes.
Also in Firefox there were some weird artefacts in Perlin noise when using Int8Array (patterns were repeated across diagonal lines).
For this extended Cube primitive with "sides" parameter.
You can use it to switch off cube faces like this:
var cube = new Cube( 100, 100, 100, 1, 1, materials, false, { ny: false } );
Default is all six faces on => { px: true, nx: true, py: true, ny: true, pz: true, nz: true }
alteredq
Mr.doob