outline shader only threejs - three.js

based on previous questions: Outline object (normal scale + stencil mask) three.js
I am trying to make a material shader for threejs to render only the contour and not both with the object. Should this be the right reference or is there a more straighforward way to do it?

At the moment, the most straightforward solution I could find is from: https://stemkoski.github.io/Three.js/Outline.html with a slightly scaled marching cube using side: THREE.BackSide param in its material.

Related

Unity 3D Does Not Apply Texture To Object Properly

I have got a problem with texturing an object in Unity 3D. I have made a simple object in 3Ds Max and inserted it into Unity and then tried to apply an image as texture but it does not apply the texture and it only changes the color of the object! This is the print screen:
As you can see I have got two models. One of them is made in 3Ds Max and does not apply the texture and the other one is made in Unity and it's a cube and it gets the texture correctly.
So what's going wrong here ? Not that I also changed the tiling and offset settings of model's shader but still nothing's changed at all! :(
You didn't UV Unwrapped the 3d object before exporting to Unity3D.
To apply the textures on 3d mesh, any engine needs to know coordinates for texture, and this is called UV Mapping.
WIKIPEDIA - UV_mapping

three.js create texture from cubecamera

When using a cube camera one normally sets the envMap of the material to the cubeCamera.renderTarget, e.g.:
var myMaterial = new THREE.MeshBasicMaterial({color:0xffffff,
envMap: myCubeCamera.renderTarget,
side: THREE.DoubleSide});
This works great for meshes that are meant to reflect or refract what the cube camera sees. However, I'd like to simply create a texture and apply that to my mesh. In other words, I don't want my object to reflect or refract. I want the face normals to be ignored.
I tried using a THREE.WebGLRenderTarget, but it won't handle a cube camera. And using a single perpspective camera with WebGLRenderTarget does not give me a 360 texture, obviously.
Finally, simply assigning the cubeCamera.renderTarget to the 'map' property of the material doesn't work either.
Is it possible to do what I want?
r73.
Edit: this is not what the author of the question is looking for, I'll keep my answer below for other people
Your envmap is already a texture so there's no need to apply it as a map. Also, cubemaps and textures are structurally different, so it won't be possible to swap them, or if you succeed in doing that the result is not what you probably you might expect.
I understand from what you're asking you want a static envmap instead to be updated at each frame, if that's the case simply don't run myCubeCamera.updateCubeMap() into your render function. Instead place it at the end of your scene initialization with your desired cube camera position, your envmap will show only that frame.
See examples below:
Dynamic Cubemap Example
Static Cubemap Example
The answer is: Set the refractionRatio on the material to 1.0. Then face normals are ignored since no refraction is occurring.
In a normal situation where the Cube Camera is in the same scene as the mesh, this would be pointless because the mesh would be invisible. But in cases where the Cube Camera is looking at a different scene, then this is a useful feature.

Three.js Merge objects and textures

My question is related to this article:
http://blog.wolfire.com/2009/06/how-to-project-decals/
If my understanding is correct, a mesh made from the intersection of the original mesh and a cube is added to the scene to make a decal appear.
I need to save the final texture. So I was wondering if there is a way to 'merge' the texture of the original mesh and the added decal mesh?
You'd need to do some tricky stuff to convert from the model geometry space into UV coordinate space so you could draw the new pixels into the texture map. If you want to be able to use more than one material that way, you'd also probably need to implement some kind of "material map" similar to how some deferred rendering systems work. Otherwise you're limited to at most, one material per face, which wouldn't work for detailed decals with alpha.
I guess you could copy the UV coordinates from the original mesh into the decal mesh, and the use that information to reproject the decal texture into the original texture

How to use part of a texture?

How do I create a three.js material/geometry which uses part of a texture?
I am first rendering a scene to a texture. This texture is used for a Mesh with a CubeGeometry and a MeshLambertMaterial. What I would like to do now is have only a part of the texture displayed on the cube face (like a window into the texture).
I've done this before using OpenGL ES directly, with shaders, but I don't see what parameters might make it possible using the standard three.js library.
That is what texture coordinates are for. See this question and answer:
http://stackoverflow.com/questions/19366991/drawing-part-of-open-gl-texture/19367844#19367844

Shadowmap texture alpha

Is it possible to fix the shadow map problem below? Basically the shadowmap doesn't seem to respect the alpha test. The shadow is of the tree planes geometry and not of the leaves. Would this be something to do with depth-write perhaps?
I am just using a standard
THREE.MeshPhongMaterial
When casting shadows, objects are treated as solid from the point of view of the light.
But what you can do is specify a customDepthMaterial that utilizes alphaTest. This custom depth material is used in the shadow calculation.
There is an example of this technique here: http://threejs.org/examples/webgl_animation_cloth.html.
three.js r.63

Resources