I'm trying to resolve some stitching while using a mesh in wireframe mode and some lines represented at the same coordinates as the mesh. The idea is that they are used for two representation modes of the same data in my software.
I created a jsFiddle for testing purpose : http://jsfiddle.net/Ludobaka/c0tq3gd0/
I already tried some tips from ThreeJS topics here as :
Using renderOrder of THREE.Mesh to render my wireframe first and using depthFunc of THREE.Material with THREE.LessDepth for the line representation.
Using polygonOffset property of THREE.Material of the mesh like the following code :
mat.polygonOffset = true;
mat.polygonOffsetFactor = 1.0;
mat.polygonOffsetUnit = 4.0;
But it looks like because wireframe is using glContext.LINES, it is not affected by these properties.
I want my wireframe always be on top of the lines. Do you know an other way to proceed ?
Thanks
Related
Thansks to #Mugen87, I managed to create a dynamic mask on my scene using a post processing method : https://jsfiddle.net/40gef6sz/ (if you move the camera you will see the cube disappear behind and invisible circle, made with this image : https://i.imgur.com/sJwKYvZ.jpg)
I would like to add some effects on my mask using a fragment shader script. On this fiddle you can see my texture moving (I replaced a THREE.MeshBasicMaterial with a THREE.ShaderMaterial) : https://jsfiddle.net/grc_michael/ghmf5sdo/
When I combine this new material with the post processing method, I can't reach the same result than the first jsfiddle. I don't know where to add my #define ALPHATEST value inside my fragment shader.
You can see the result here : https://jsfiddle.net/grc_michael/82bkLn96/
I think I'm quite close the expected result. Does anyone know where to add the ALPHATEST value properly inside my fragment shader ? Thank you
Here us the original, updated fiddle with your custom shader material: https://jsfiddle.net/k2c5upfo/1/
When using an image as an alpha map, you can sample it in the same way like built-in materials. Meaning the alpha test looks like so:
if (texture2D(texture1,xy).g < 0.5) discard;
I am attempting to modify the ThreeJS materials example seen here, and have been fairly successful so far in reverse engineering it in to my own minimalist demo.
The problem comes when I attempt to modify the materials.
I have changed mlib["Orange metal"] to the following:
"Orange metal": new THREE.MeshLambertMaterial( {
map: carTexture,
envMap: skyBox,
combine: THREE.MultiplyOperation
} )
carTexture is a reference to the following:
var carTexture = THREE.ImageUtils.loadTexture('texture/blue.jpg');
carTexture.wrapS = carTexture.wrapT = THREE.RepeatWrapping;
carTexture.repeat.set(3,3 );
carTexture.wrapS = THREE.RepeatWrapping;
carTexture.wrapT = THREE.RepeatWrapping;
And while this has changed my final output, the detail in the texture is missing.
For reference: here is the texture file:
Which clearly has a metalic flake texture.
Meanwhile my final product looks like this:
Completely smooth.
Yet, if I add a taurus with the exact same texture, I can see the details quite clearly:
I have played around with the dimensions of the texture file (up to several thousand percent), and the reflectivity of the MeshLambertMaterial, but not been able to see any change at all.
Your model needs UV coordinates.
On a model like this, it will need to be done in 3d software such as 3ds Max, Maya etc.
If you could get your hands on a version of the model which already has the correct UV coordinates set it would save you all the hassle.
Setting up UV coordinates is not so easy on a model like this if you have never done it before.
An alternative may be generate your paint flake in your shader (without using UV) rather than in a texture (I willl soon be attempting this myself for a personal project).
HERE are some youtube videos on UV unwrapping in 3ds Max
I'm searching to add an IBL to my scene and objects. But I can't find anything on the web. There are some examples with an envMap, but the problem is that with the envMap the object looks like chrome...
I'm trying to have such an effect:
I found that you can use IBL (Image Based Lighting), PRT (Precomputed Radiance Transfer) or PBR (Physically Based Rendering). But I'm unable to know how to use such an effect with three.js.
[EDIT]
After using the new MeshStandardMaterial from the r74dev I'm able to have the following result:
(before)
(after)
But I can't use MeshStandardMaterial and envMap with textures. Either the texture or the MeshStandardMaterial dooesn't work.
Thanks to WestLangley I'm using MeshStandardMaterial:
var objectGeometry = new THREE.SphereGeometry( 10, 100, 100 );
material = new THREE.MeshStandardMaterial({envMap : textureSkydome});
(r74dev)
Maybe you can use lightmaps. You can use them with THREE.MeshPhongMterial by setting material.lightmap = someLightmapTexture. Important - you need a second set of UVs in your geometry in order to use lightmaps.
have a look at this example.
I have made a small scene in blender (6 objects, each using 1 to 4 materials).
When exporting this (using the materials, and the scene option) with the dev exporter and loading it via:
var loader = new THREE.ObjectLoader();
loader.load( 'assets/scene.json', function ( scene ) { ...
And then checking the scene, I can see it has 6 children (good) and that each of the five children only has one MeshLambertMaterial (instead of the material mix from blender) bad.
Any hints on what I am doing wrong?
Those are btw basic materials (just a color basically) no textures or anything.
The scene renders correctly (minus the material mix).
Here is a link to the 113kb scene file (zipped): http://jppresents.net/static/blender/exportBug/scene.zip
Looking at the file I think all materials are there - so the problem must be the way I load it?
Not a solution, but a work around:
Since the only difference between all my materials was just the color, I have now applied exactly one material with a multi colored texture per object.
Then I uv-mapped the faces of the object to the colors corresponding to the previously set material color.
This was easy using the hotkey "shift + G" which lets you select all faces with the same material. (Then just assign them to the texture material, move/scale those in the uv-view to the part of the texture that matches the old color.)
We are studying on product designer project. Designer is ready.
I want to do 3d preview result with three.js.
How can we texture one side of phone case? or can we border texture mapping?
OBJLoader version:
http://www.shopilife.com/baskiburada/viewer/viewer_4.html
And some obj files cannot be textured. Error is "GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2"
http://www.shopilife.com/baskiburada/viewer/viewer2.html
First, regarding re-texturing the back vs. front of the phone case. The approach here is to seperate the UV coordinates on the model itself. This way you have two sets of materials/textures/UVs. Then during runtime you load them both using a MeshFaceMaterial to load the two materials in an array like so:
materialArray.push(THREE.BasicMeshMaterial({color: 0xff0000})); //use whatever Material type you'd like of course
materialArray.push(THREE.BasicMeshMaterial({color: 0x0000ff}));
var multipleMaterial = new THREE.MeshFaceMaterial(materialArray);
phoneCaseMesh= new THREE.Mesh( geometry, multipleMaterial );
Then when you want to switch one out you would grab the mesh and change the mapping to the desired side something like:
phoneCaseMesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'newtexture.jpg' );
Second, regarding the Error on you second sample, WestLangley is correct the OBJ file has no UV coordinates to map to, so the index is out of bounds when you apply a texture. If you look at both OBJ files your iphone4.obj has vt entities while the untitled.obj is just v and f. Hope that helps