I have found this example with diffuse, specular and normal map:
var ambient = 0x111111, diffuse = 0xbbbbbb, specular = 0x060606, shininess = 35;
var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "textures/test_NRM.jpg" );
uniforms[ "uNormalScale" ].value.set( 2, 2 );
uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "textures/test_COL.jpg" );
uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( "textures/test_SPEC.jpg" );
uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
uniforms[ "uSpecularColor" ].value.setHex( specular );
uniforms[ "uAmbientColor" ].value.setHex( ambient );
uniforms[ "uShininess" ].value = shininess;
uniforms[ "wrapRGB" ].value.set(1, 1,1 );
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
var material = new THREE.ShaderMaterial( parameters );
material.wrapAround = true;
loader = new THREE.JSONLoader( true );
document.body.appendChild( loader.statusDomElement );
loader.load( "geo/sphere.js", function( geometry ) { createScene( geometry, 100, material ) } );
renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x111111, clearAlpha: 1 } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
Now I see my textures displayed on the sphere, but only one time. I need more tiles of the texture displayed and I inserted:
tNormal.wrapS = THREE.RepeatWrapping;
tNormal.wrapT = THREE.RepeatWrapping;
tNormal.repeat.x=100;
tNormal.repeat.y=100;
But it doesn`t work, does anyone have a clue?
Best Regards
The repeat.x and repeat.y determine how many times the texture needs to be repeated on the face. In you case 100x100 times. Try setting both values to 2 and see if that works
Related
I am working on a project where I have multiple shaders applied to an object. The basic scene is lit with directional lights but when I add a point light or spotlight to the scene the object disappears entirely. I have other objects in the scene that do not disappear so I can only assume it has to do with the shaders applied and the point light. Here is an excerpt of the shaders I am using:
var shader = THREE.ShaderSkin[ "skin" ];
var uniformsUV = THREE.UniformsUtils.clone( shader.uniforms );
var textureLoader = new THREE.TextureLoader();
uniformsUV[ "tNormal" ].value = textureLoader.load( "obj/me/all_skin_hi1_normal.jpg" );
uniformsUV[ "uNormalScale" ].value = -1.5;
uniformsUV[ "tDiffuse" ].value = textureLoader.load( "obj/me/all_skin_hi1.jpg" );
uniformsUV[ "passID" ].value = 0;
uniformsUV[ "diffuse" ].value.setHex( diffuse );
uniformsUV[ "specular" ].value.setHex( specular );
uniformsUV[ "uRoughness" ].value = 0.185;
uniformsUV[ "uSpecularBrightness" ].value = 0.7;
var uniforms = THREE.UniformsUtils.clone( uniformsUV );
uniforms[ "tDiffuse" ].value = uniformsUV[ "tDiffuse" ].value;
uniforms[ "tNormal" ].value = uniformsUV[ "tNormal" ].value;
uniforms[ "passID" ].value = 1;
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
var parametersUV = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShaderUV, uniforms: uniformsUV, lights: true };
var material = new THREE.ShaderMaterial( parameters );
material.extensions.derivatives = true;
var materialUV = new THREE.ShaderMaterial( parametersUV );
materialUV.extensions.derivatives = true;
Try updating to a newer version of the engine. That fixed it for me.
Here are comparisons, to show that I do indeed have SSAO set-up correctly.
WebGLRenderer with EffectsComposer + SSAO pass
WebGLDeferredRenderer with SSAO pass
I'm trying to mix WebGLDeferredRenderer with the SSAO composer effect like so:
renderer = new THREE.WebGLDeferredRenderer({
antialias: true,
tonemapping: THREE.FilmicOperator,
brightness: 2.5,
scale: 1.0,
width: renderWidth,
height: renderHeight
});
var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
depthMaterial.blending = THREE.NoBlending;
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, {
minFilter: THREE.NearestFilter,
magFilter: THREE.NearestFilter,
format: THREE.RGBAFormat,
antialias: true
});
var ssao = new THREE.ShaderPass( THREE.SSAOShader );
ssao.uniforms[ 'tDepth' ].value = depthTarget;
ssao.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssao.uniforms[ 'cameraNear' ].value = camera.near;
ssao.uniforms[ 'cameraFar' ].value = camera.far * 0.8;
ssao.uniforms[ 'aoClamp' ].value = 0.3;
ssao.uniforms[ 'lumInfluence' ].value = 0.1;
renderer.addEffect( ssao );
scene.overrideMaterial = depthMaterial;
renderer.render( scene, camera, depthTarget );
scene.overrideMaterial = null;
renderer.render( scene, camera );
The results are.. well.. nothing.
What am I doing wrong? How would I go about enabling SSAO within a deferred renderer?
Not sure why this works but try replacing:
renderer.render( scene, camera, depthTarget );
With:
renderer.renderer.render( scene, camera, depthTarget );
I'm running following code (jsfiddle: http://jsfiddle.net/sx9p7/ ) :
var scene, camera, renderer, composer;
var l1, l2, hemiLight;
var effectSSAO;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );
renderer.shadowMapEnabled = true;
renderer.setClearColor( 0xd8e7ff );
renderer.setSize( 800,600);
document.body.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, 800 / 600, 1, 10000 );
camera.position.set(-200,100,-60);
camera.lookAt(new THREE.Vector3(0,0,0));
var container = document.createElement( 'div' );
document.body.appendChild( container );
composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );
effectSSAO = new THREE.ShaderPass( THREE.SSAOShader );
effectSSAO.renderToScreen = true;
composer.addPass( effectSSAO );
hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.4 );
hemiLight.position.set( 0, 300, 0 );
scene.add( hemiLight );
l1 = new THREE.DirectionalLight( 0xffffff, 0.3);
l1.position.set( 100, 100, 0 );
l1.castShadow = true;
scene.add(l1);
l2 = new THREE.DirectionalLight( 0xffffff, 0.3);
l2.position.set( -100, 100, 0 );
l2.castShadow = true;
scene.add(l2);
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200), new THREE.MeshLambertMaterial({ }) );
plane.receiveShadow = true;
plane.castShadow = true;
plane.rotation.x = - 90 * Math.PI / 180;
plane.position.set(0,0,0);
scene.add( plane );
var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, ambient: 0xbbbbbb, specular: 0xcccccc, perPixel: true, vertexColors: THREE.FaceColors } ));
cube.receiveShadow = true;
cube.castShadow = true;
scene.add(cube);
}
function animate() {
requestAnimationFrame( animate );
composer.render();
}
and i have a problem with SSAO shader. I did try many parameters, codes, examples but still i can't remove that square which is in the middle of scene ( which sometime look like correct SSAO effect but in wrong position ??? )
If i will remove one directional light fragment is gone - but still no SSAO effect and shadows are still super very low resolution.
Well, 2 directional lights are strange anyway, just leave it at 1 for the moment.
Concerning the SSAO, see the shader and its numerous parameters. you would need to adjust those according to your scene. example:
effectSSAO .uniforms[ 'tDepth' ].value = depthTarget;
effectSSAO .uniforms[ 'size' ].value.set( width, height );
effectSSAO .uniforms[ 'cameraNear' ].value = 0.1;
effectSSAO .uniforms[ 'cameraFar' ].value = 1000;
As you see above, you also need more than just a few parameter tweaks.
The Three.SSAO shader expects a previously rendered depth pass to work properly.
See here for more help:
How to use the three.js SSAO shader?
I am looking to use a texture as an Ambient map in Three.JS - and am not sure hoe to implement this. Here is the code for my material so far:
var shader : THREE.Shader = THREE.ShaderLib[ "normalmap" ];
var uniforms : THREE.Uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "enableAO" ].value = false;
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "enableSpecular" ].value = true;
uniforms[ "enableReflection" ].value = true;
uniforms[ "enableDisplacement" ].value = false;
uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( this.earthMaterials.earthNormal );
uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( this.earthMaterials.earthMap );
uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( this.earthMaterials.earthMap );
uniforms[ "uNormalScale" ].value.set( this.earthMaterials.normalScale, this.earthMaterials.normalScale );
uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
uniforms[ "uAmbientColor" ].value.convertGammaToLinear();
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
this.earthNormal = new THREE.ShaderMaterial( parameters );
How do I use a texture as an ambient map ?
Thank you for the help !
I am assuming that you are trying to implement ambient occlusion.
You are already using the "normal" shader, and it supports an AO map. All you have to do is enable and assign your AO map.
An alternative is to bake the AO into your diffuse map.
A third option is to treat the AO map as a lightMap. MeshPhongMaterial supports light maps, it just doesn't support displacement maps, which you do not appear to be using anyway.
three.js r.58
Below code renders the earth as BLACK globe. please note im a beginner in WebGL, also below 'Uniforms' & parameters section I found in someones code and utilized it.
If I add normal material it works, but with Shader it does not work.
Script links:
https://threejsdoc.appspot.com/doc/three.js/examples/js/ShaderExtras.js
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>
//Earth
var earthTexture = THREE.ImageUtils.loadTexture( "img/planets/earth_atmos_2048.jpg" );
var earthCloudsTexture = THREE.ImageUtils.loadTexture( "img/planets/earth_clouds_1024.png" );
var earthNormalTexture = THREE.ImageUtils.loadTexture( "img/planets/earth_normal_2048.jpg" );
var earthSpecularTexture = THREE.ImageUtils.loadTexture( "img/planets/earth_specular_2048.jpg" );
var earthShader = THREE.ShaderUtils.lib[ "normal" ];
var earthUniforms = THREE.UniformsUtils.clone( earthShader.uniforms );
earthUniforms[ "tNormal" ].texture = earthNormalTexture;
earthUniforms[ "uNormalScale" ].value = 0.85;
earthUniforms[ "tDiffuse" ].texture = earthNormalTexture;
earthUniforms[ "tSpecular" ].texture = earthSpecularTexture;
earthUniforms[ "enableAO" ].value = false;
earthUniforms[ "enableDiffuse" ].value = true;
earthUniforms[ "enableSpecular" ].value = true;
earthUniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
earthUniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
earthUniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
earthUniforms[ "uShininess" ].value = 15;
var earthParameters = {
fragmentShader: earthShader.fragmentShader,
vertexShader: earthShader.vertexShader,
uniforms: earthUniforms,
lights: true,
fog: true
};
var earth_mat = new THREE.ShaderMaterial( earthParameters );
var earth_geom = new THREE.SphereGeometry( 200, 32, 32 );
earth_geom.computeTangents();
var earth = new THREE.Mesh( earth_geom, earth_mat );
earth.position.x = 6000;
scene.add( earth );