I've been trying to add an environment app to a custom Shader Material using three's MeshPhysical fragment shader and my own vertex shader. I am setting the envMap in the custom uniforms and in the material attribute, but it does not work. I will be pasting the code below, any help would be greatly appreciated.
var blobMaterial = new THREE.ShaderMaterial({
uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib.physical.uniforms),
vertexShader: THREE.ShaderLib.physical.vertexShader,//physicalVertexShader,
fragmentShader: THREE.ShaderLib.physical.fragmentShader,
lights: true,
});
// var blobMaterial = new THREE.MeshPhysicalMaterial({
// envMapIntensity:0.5,
// color:0xf67104
// })
blobMaterial.envMap = envMap;
blobMaterial.combine = THREE.MultiplyOperation;
blobMaterial.uniforms.envMap.value = envMap;
// blobMaterial.uniforms.envMapIntensity.value = 1;
blob = new THREE.Mesh(
new THREE.IcosahedronGeometry( 20, 120 ),
blobMaterial
);
I tried following this https://jsfiddle.net/rtemj7va/, but still to no avail.
Related
Can I add more than one Mesh to the Scene in three.js? Code below shows my attempt to add a second Mesh to the Scene, however, it is not visible.
function setScene() {
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
materials = new THREE.ShaderMaterial({
fragmentShader: Cam.fragmentShader,
vertexShader: Cam.vertexShader,
uniforms: Cam.uniforms,
side: THREE.BackSide,
transparent: true
});
var skyBox = new THREE.Mesh( geometry, materials );
Cam.scene.add( skyBox );
// Add second SkyBox to the Scene
THREE.ImageUtils.crossOrigin = '';
var loader = new THREE.TextureLoader();
loader.load('img/test-circle-sample.png', function ( texture ) {
var geometry = new THREE.PlaneGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial( {
map:texture,
opacity : 1,
side : THREE.DoubleSide,
transparent : false
} );
var sprite = new THREE.Mesh( geometry, material );
sprite.position.set(0,-3,7);
var rotation = new THREE.Matrix4()
.makeRotationAxis(new THREE.Vector3(1,0,0), 1.57);
sprite.rotation.setFromRotationMatrix(rotation);
Cam.scene.add(sprite);
});
}
Above code adds a panoramic image successfully, which I can see. I then attempt to add an overlay image to the scene that should stay on top of the panoramic image, but it remains hidden.
Note, if I do not add the first object (panoramic image) to the scene (i.e. remove Cam.scene.add( skyBox )) then the second overlay image appears fine.
I'm getting some artifacts on the top and bottom sides on some of my sprites. These are the shaders I am using, if that matters. I'm using v76.
And I'm building these sprites like this:
var object = new THREE.Object3D();
var textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/image.png', function(texture) {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
var geometry = new THREE.PlaneBufferGeometry(15, 15);
var material = new THREE.MeshPhongMaterial({
map: texture,
color: 0xffffff,
transparent: true,
alphaTest: 0.2,
side: DoubleSide,
});
var mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.customDepthMaterial = new ShaderMaterial({
uniforms: { texture: { type: 't', value: this.material.map } },
vertexShader: vertexShader,
fragmentShader: fragmentShader,
});
object.add(mesh);
})
Don't set your textures to wrap with THREE.RepeatWrapping. This can leave artifacts on texture edges meant to be used as sprites.
I am attempting to have my skybox not be affected by the camera.far parameter. I would like to cull all other scene objects with this just not the skybox.
When I set skyBox.frustumCulled = false; it makes no difference. skyBox being the mesh of course.
Is this done by adding another render pass? If so I would need 2 different cameras one with a really high far value to allow viewing of the skybox right? How can this be done efficiently?
For clarity here is the snippet from my terrain object code used for drawing the skybox:
shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = this.cubetexture;
mat = new THREE.ShaderMaterial({
uniforms: shader.uniforms,
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
depthWrite: false,
side: THREE.BackSide
});
geo = new THREE.BufferGeometry().fromGeometry(new THREE.BoxGeometry(1024, 1024, 1024));
mesh = new THREE.Mesh(geo, mat);
mesh.rotation.y += 90;
mesh.scale.x = mesh.scale.y = mesh.scale.z = 50;
mesh.frustumCulled = false;
mesh.matrixAutoUpdate = false;
mesh.rotationAutoUpdate = false;
mesh.updateMatrix();
this.skybox = mesh;
scene.add(this.skybox);
You're adding a skybox in the 'main' scene. A better way to accomplish a skydome would be to create a new scene. this will be the 'background' to your 'main' scene. There's also a discussion about skydomes v.s. skyboxes, simply put, a box saves polys, a dome looks better. in this example i'll be using a dome/sphere.
var renderer = new THREE.WebGLRenderer( {alpha: true, antialias: true} );
var mainScene = new THREE.Scene();
var mainCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
var skydome = {
scene: new THREE.Scene(),
camera: new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000 );
};
skydome.material = new THREE.MeshBasicMaterial({color: 0x0F0F0F}) //the material for the skydome, for sake of lazyness i took a MeshBasicMaterial.
skydome.mesh = new THREE.Mesh(new THREE.SphereGeometry(100, 20, 20), skydome.material);
skydome.scene.add(skydome.mesh);
now, during the render function you adjust only the rotation of the skydome camera, not the position.
var render = function(){
requestAnimationFrame( render );
skydome.camera.quaternion = mainCamera.quaternion;
renderer.render(skydome.scene, skydome.camera); //first render the skydome
renderer.render(mainScene, mainCamera);//then render the rest over the skydome
};
renderer.autoclear = false; //otherwise only the main scene will be rendered.
How to add reflectionMaterial with environment map, am using two cameras and two scene in order to achieve it, based on the webgl_materials_cubemap
and am using Object that is loaded using OBJMTLLoder, i can see the both Environment map, and Object on my scene, but the reflection of environment is not working on the object..
find my code below :
var urls = [
'textures/cube/canary/pos-x.png',
'textures/cube/canary/neg-x.png',
'textures/cube/canary/pos-y.png',
'textures/cube/canary/neg-y.png',
'textures/cube/canary/pos-z.png',
'textures/cube/canary/neg-z.png'
];
var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
cubemap.format = THREE.RGBFormat;
var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
shader.uniforms['tCube'].value = cubemap; // apply textures to shader
// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
scene.add( skybox );
var object = scene.getObjectByName ("myname", true);
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var geometry = child.geometry;
var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: cubemap
});
mesh = new THREE.Mesh(geometry, reflectionMaterial);
sceneCube.add(mesh);
}
});
Here am just changing the scene.add(mesh); to sceneCube.add(mesh); the reflection worked but the camera doesn't ..
you can see the differences here
Example 1
Example 2
In the first demo you can see that the scene working fine with the environment and without Object reflection
In the second you can see that the Reflection working fine but the camera behavior gets wired
i fixed it myself by adding following line inside the Object traverse
child.material.map = reflectionMaterial;
child.material.needsUpdate = true;
However i don't know am doing is correct or not but it is worked as like expected,
I'm trying to offset a texture that's being used as an environment map, but not having much luck.
The texture is loaded with the loadTextureCube() method, which gets applied to my mesh just fine, but the offsets don't seem to have any effect.
The texture is just a big gray circle to give a little bit of gloss.
Any thoughts on what I'm doing wrong?
var urls = [
'pos-x.png',
'neg-x.png',
'pos-y.png',
'neg-y.png',
'pos-z.png',
'neg-z.png'
];
var cubemap = THREE.ImageUtils.loadTextureCube(urls);
cubemap.offset.y = -.5;
cubemap.offset.x = -.5;
cubemap.needsUpdate=true;
I'm assuming based on loadTextureCube that your utilizing the cube shader approach to skyboxes. So far everything with your code is fine. The problem your seeing is that while your texture has offset properties, the material (or more specifically the cube shader program therein) does not have uniforms to pass this along to the fragmentation shader. This of course is assuming your doing something like this:
Eg. cube shader material
var skyboxGeo = new THREE.CubeGeometry( 5000, 5000, 5000 );
var cubeShader = THREE.ShaderUtils.lib[ "cube" ];
cubeShader.uniforms[ "tCube" ].value = cubemap;
var skyboxMat = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
side: THREE.BackSide
});
var skybox = new THREE.Mesh( skyboxGeo, skyboxMat );
scene.add( skybox );
There's likely a number of work arounds, but you could alway try something like a MeshFaceMaterial on a standard cube to achieve the desired result:
Eg. standard material
var skyboxGeo = new THREE.CubeGeometry( 5000, 5000, 5000 );
var materialArray = [];
for (var i = 0; i < 6; i++) {
var cubeTex = THREE.ImageUtils.loadTexture( urls[i] );
cubeTex.offset.x = -.5;
cubeTex.offset.y = -.5;
materialArray.push( new THREE.MeshBasicMaterial({
map: cubeTex,
side: THREE.BackSide
}));
}
var skyboxMat = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyboxGeo, skyboxMat );
Hope that helps
~D