mrdoob/three.js — Issue #1448: Strange black/non-black material
Author: plopidou
Created: 2012-03-05 16:09:48+00:00
State: open

Hi all!

I have a quite strange rendering, as you can see in the linked screenshot:

http://imageupload.org/en/file/194342/terrain5.jpg.html

I will attach the relevant code (if you think I am missing some, please do not hesitate and let me know).

"Grass" geometry and mesh:

[callback for JSONLoader:]

var grass_geometry = new THREE.Geometry();

for([snip]) {
mesh = new THREE.Mesh(
geometry,
new THREE.MeshFaceMaterial()
);

scale_multiplier = (0.8+Math.random()/3)*4;

mesh.position.set(
vertex.position.x,
vertex.position.y,
vertex.position.z+scale_multiplier/2
);

mesh.scale.set(
scale_multiplier,
scale_multiplier,
scale_multiplier
);

THREE.GeometryUtils.merge(grass_geometry, mesh);
}

grass_geometry.computeFaceNormals();
grass_geometry.computeVertexNormals();
grass_geometry.__dirtyNormals = true;
grass_geometry.__dirtyVertices = true;

grass_mesh = new THREE.Mesh(
grass_geometry,
material
);
grass_mesh.castShadow = false;
grass_mesh.receiveShadow = true;
grass_mesh.doubleSided = true;

grass_mesh.rotation.x = -90 * Math.PI / 180;

scene.add(grass_mesh);

Material definition:

var shader = THREE.ShaderLib['grass1'];

var parameters = {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
attributes: shader.attributes,
lights: true,
fog: true
};
var material = new THREE.ShaderMaterial( parameters );

And the shader "code' (most of it being taken from the already existing shaders):

THREE.ShaderLib['grass1'] = {

uniforms: {
tDiffuseGrass	: { type: "t", value: 0, texture: THREE.ImageUtils.loadTexture( "textures/grass2.png" ) },

maxDrawDistance	:	{ type: "f", value: 400.0 },

//common
diffuse	: { type: "c", value: new THREE.Color( 0xeeeeee ) },
opacity	: { type: "f", value: 1.0 },
map	: { type: "t", value: 1, texture: null },
offsetRepeat	: { type: "v4", value: new THREE.Vector4( 0, 0, 1, 1 ) },
lightMap	: { type: "t", value: 2, texture: null },
envMap	: { type: "t", value: 3, texture: null },
flipEnvMap	: { type: "f", value: -1 },
useRefract	: { type: "i", value: 0 },
reflectivity	: { type: "f", value: 1.0 },
refractionRatio	: { type: "f", value: 0.98 },
combine	: { type: "i", value: 0 },
morphTargetInfluences	: { type: "f", value: 0 },

//fog
fogDensity	: { type: "f", value: 0.25 },
fogNear	: { type: "f", value: 10 },
fogFar	: { type: "f", value: 10000 },
fogColor	: { type: "c", value: new THREE.Color( 0x828be7 ) },

//lights
ambientLightColor	: { type: "fv", value: [] },
directionalLightDirection : { type: "fv", value: [] },
directionalLightColor	: { type: "fv", value: [] },
pointLightColor	: { type: "fv", value: [] },
pointLightPosition	: { type: "fv", value: [] },
pointLightDistance	: { type: "fv1", value: [] },

//lambert shading
ambient	: { type: "c", value: new THREE.Color(328965) },
wrapRGB	: { type: "v3", value: new THREE.Vector3(1, 1, 1)},

//shadowmap
shadowMap	: { type: "tv", value: 4, texture: [] },
shadowMapSize	: { type: "v2v", value: [] },
shadowBias	: { type: "fv1", value: [] },
shadowDarkness	: { type: "fv1", value: [] },
shadowMatrix	: { type: "m4v", value: [] }
},

vertexShader: [

THREE.ShaderChunk[ "lights_lambert_pars_vertex" ],
THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
"varying vec3 vLightWeighting;",

"varying vec2 vUv;",
"varying vec3 vPosition;",

"void main() {",

"vPosition = position;",
"vUv = uv;",

"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",

"vec3 transformedNormal = normalize( normalMatrix * normal );",
THREE.ShaderChunk[ "lights_lambert_vertex" ],

THREE.ShaderChunk[ "default_vertex" ],
THREE.ShaderChunk[ "shadowmap_vertex" ],

"}"

].join("\n"),

fragmentShader: [

"varying vec3 vLightWeighting;",

"uniform sampler2D tDiffuseGrass;",
"uniform float maxDrawDistance;",

THREE.ShaderChunk[ "fog_pars_fragment" ],
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],

"varying vec2 vUv;",
"varying vec3 vPosition;",

"void main() {",

"vec4 color = texture2D( tDiffuseGrass, vUv );",
"float min_alpha = 0.85;",

"float z = gl_FragCoord.z / gl_FragCoord.w;",
"color.a = min(color.a / z * maxDrawDistance, color.a);",

"gl_FragColor = color;",

"if(gl_FragColor.a < min_alpha) discard;",

"gl_FragColor.xyz = gl_FragColor.xyz * vLightWeighting;",

THREE.ShaderChunk[ "shadowmap_fragment" ],
// no need since the maxDrawDistance is inferior to the fog distance
//THREE.ShaderChunk[ "fog_fragment" ],

"}"

].join("\n")

};

The model exported from blender 2.61:

{

"metadata" :
{
"formatVersion" : 3,
"generatedBy" : "Blender 2.60 Exporter",
"vertices" : 12,
"faces" : 6,
"normals" : 4,
"colors" : 0,
"uvs" : 4,
"materials" : 0,
"morphTargets" : 0
},

"scale" : 1.000000,

"materials": [],

"vertices": [0.500000,0.866026,-0.700000,0.500000,0.866026,0.700000,-0.500000,-0.866026,0.700000,-0.499999,-0.866025,-0.700000,0.500000,-0.866026,-0.700000,0.500000,-0.866026,0.700000,-0.500000,0.866026,0.700000,-0.499999,0.866025,-0.700000,1.000000,-0.000000,-0.700000,1.000000,0.000000,0.700000,-1.000000,0.000000,0.700000,-1.000000,-0.000000,-0.700000],

"morphTargets": [],

"normals": [-0.866024,0.499985,0.000000,0.866024,0.499985,0.000000,0.000000,0.999969,0.000000,0.000000,1.000000,0.000000],

"colors": [],

"uvs": [[0.003125,1.003125,0.987500,0.996875,0.984375,0.318750,0.012500,0.321875]],

"faces": [40,0,3,2,0,1,2,0,0,0,40,0,2,1,0,2,3,0,0,0,40,4,7,6,0,1,2,1,1,1,40,4,6,5,0,2,3,1,1,1,40,8,11,10,0,1,2,2,2,3,40,8,10,9,0,2,3,2,3,3]

}

The texture applied is 256*256, png24. Should I upload it too? (I believe not, as it render properly on *some" faces).

Many thanks, because I am at a loss here! :)

Plop