I took an equirectangular envMap from the three.js docs sample where it appears sharp on a sphere.
If I load the same material into my aframe scene with the following params
material="spherical-env-map: /assets/models/1/envtest.jpeg; roughness: 0; metalness: 1"
it appears blurry like this
What am I doing wrong?
Reproducible example via glitch: https://glitch.com/edit/#!/sepia-forest-keyboard
What I have noticed when setting up the glitch:
Using Aframe 1.0.3 it is blurry
Using Aframe 1.2.0 it remains black no matter what I do
That happens because you are using a PBR material in your code since the default material of A-Frame is MeshStandardMaterial. Meaning a material that tries to render physically correct. The official three.js example uses MeshLambertMaterial which is no PBR material. Both type of materials implement environment maps differently.
When using a PBR material, it's recommended to use a HDR environment map which is also pre-processed with PMREMGenerator like in this example: https://threejs.org/examples/webgl_loader_gltf
Related
I have been experimenting with threejs for the past few days and have been experiencing inconsistencies in the lighting of my models. So I decided to do a little experiment. Here are side-by-side pictures of scenes containing the same model and the same lighting(Ambient, color: #FFFFFF, intensity: 0.3) one created using javascript and the other using threejs editor:
Using threejs editor
Using JS
Why are the colors and lighting different? Am I missing something?
You probably have not configured a sRGB workflow in your app. So try it with the following line:
renderer.outputEncoding = THREE.sRGBEncoding;
I saw some discussions saying gltf does not export bumpmap but if I look into my exported gltf file (separate files mode) there is a bumpmap file with a bumpscale (and also normal map). After loading into three.js I get a meshstandard material with bumpmap object and scale value and also normalmap object. But they seem to have no effect on the rendered object. What is exactly allowed to do to export relief effect from Blender to Three.js with gltf ?
The only relief effect available in glTF is a tangent-space normal map, as shown here:
Blender does have the ability to convert height maps and other kinds of bump maps to tangent-space normal maps, by way of the "Bake" function in Cycles. There are also online utilities that can do this as well.
When importing a gltf object into an a-frame scene I'd like to set an equirectangular environment map for that object to influence its reflections. I'd like to use the same img DOM id reference as I used in the sky entity. How can I do that?
For example, I'd like to be able to specify code such as this:
<a-entity gltf-model="#model-file" env-map="#sky"> </a-entity>
I found a cubemap version of this by #donmccurdy but looking for equirectangular instead and also a mechanism to use an already loaded image texture.
https://github.com/donmccurdy/aframe-extras/tree/master/src/misc#cube-env-map
See this answer:
Aframe gltf-model demo with envmap
Another option for the future, investigate scene.environment threejs which may apply the same environment map automatically to all objects with supported materials.
Just swapped from the older GLTF Blender exporter to the newer import/export version. Upon doing so, my meshes got significantly darker, and I can't figure out why.
mesh lighting sample :
The left is the older Blender > GLTF exporter, and the right is the newer one. Gamma is set to true, and I've played around with various options within Blender, as well as three.js lighting intensity, etc. (jacking the intensity up to make it look reasonable makes the shadows disappear). It renders the same in Mccurdy's GLTF viewer, and none of the lighting sliders get anywhere close to the lighting from the prior GLTF exporter. I need to use the new version for animation and morph playback purposes. Thanks as always for any suggestions.
Just in case it's helpful to anyone else, apparently the newer Blender > GLTF exporter defaulted to THREE.MeshStandardMaterial. I swapped to THREE.MeshLambertMaterial and the problem was solved.
const oldMat = child.material;
const newMat = new THREE.MeshLambertMaterial({
color: oldMat.color,
map: oldMat.map
});
child.material = newMat;
I'm creating terrain editor with three.js and i have encountered few problems.
First. Shadows renders on MeshLambertMaterial, but it wont on ShaderMaterial.
Second. How to change object's material (from lambert to shader) on runtime?
Here's demo of my editor: http://78.62.160.169/webgl/editor/
And source code: http://78.62.160.169/webgl/editor/script.js
LambertMaterial is a built-in material, that's supported by the plugins. So shadow plugin supports rendering on the LambertMaterial, while ShaderMaterial is your own shader/material, that should manually enable shadow support, it's not set by the default.
Switching material: https://github.com/mrdoob/three.js/wiki/Updates
here is the example of ShaderMaterial with shadow and fog
https://gist.github.com/wmcmurray/6696fc95f25bbd2401d72a74e9493261
or you can also rewrite a shader from LambertMaterial or other,
make it support your own shader