three.js flat color using FlatShading and a texture - three.js

I'm creating a terrain with three.js and texturing with some grass texture I found, and applying FlatShading so it looks low poly, but the shading only modifies that and I'm still seeing the texture applied, I need each face to have a flat color and not the texture, like this picture:
http://i.ytimg.com/vi/9WFBnc_gPMo/maxresdefault.jpg
Unity using PolyWorld asset, from a terrain with a grass texture for example, it applies flat shading and also uses a flat color as texture (predominant color?)

What you seem to want is inefficient, but one way to accomplish it would be to make sure that all three faceVertexUV values for each triangle face are the same: that is for a triangle ABC the UV coordinates are all, say (.4,.6),(.4,.6),(.4,.6)
This means that all pixels of the rendered triangle will have that one uniform UV and you'll always get the same texture color across the triangle (some filtering notwithstanding in very extreme foreshortening cases)

Related

Three.js plane inherit topography from set of meshes

What's working:
I have a solution for loading in topography using terrain tiles. Each tile occupies a plane as mesh. The image on the plane can then be any map tile source. Each plane mesh is a child of an object3d and offset accordingly to create the overall terrain.
The Question:
I am not sure the best way to go about having an irregular shape inherit 3d surfaces. This shape could be drawn or imported as KML. Is there a way to use a vertex shader to inherit the topography? I would like the topography as a mesh so that I can interrogate the topography of the shape. In this way it is different from using a shader to paint the surface as a mesh result is needed.
I do not yet have code for this to share as I do not know where to start. Vertex shader? Constructive solid Geometry?

ThreeJS Texture fit UV Map

I'm tring to developing a configurator. It's about cups. These should be displayed in 3D. A design should be uploaded. It works by uploading a texture like this.
Otherwise the design will not fit. Is there a way to load a full-size rectangular image as a texture? The Texture may like to be stretched. The texture should not be made cubic by the user, but automatically in the background maybe.. I hope you understand me.
This is the OBJ-File
Your UV mapping looks difficult to apply a texture to. Especially because it has so much empty space, and is skewed in an arc, so you would need to warp all your textures for them to fit nicely.
You should make the UV mapping work for you. Why don't you use the built-in CylinderBufferGeometry class to apply a texture on top of your cup geometry? You could use its attributes to match the side of your cup's shape:
CylinderBufferGeometry(
radiusTop,
radiusBottom,
height,
radialSegments,
heightSegments,
openEnded,
thetaStart,
thetaLength
);
With this approach, you could leave your cup geometry untouched, then apply a "sticker" texture on top of it. It could wrap all the way around the cup if you wanted, or it could be constrained to only the front. You could scale it up, rotate it around, and it would be independent of a baked-in UV mapping done in Blender. Another benefit is that this approach occupies the entire [0, 1] UV range, so you could simply use square textures, and you wouldn't be wasting data with empty space.
Look at this demo to see how you can play with the geometry's configuration.

make seamless height-map texture for sphere (planet)

I'm trying to generate height-map for spherical planet with perlin noise. How can I make it with seamless left/right borders? I smoothed heightmap in poles, but cannot understand how can I loop left and right sides.
This is how my textures look liked for now:
Mirroring (by y-axis)
This is great for making seamless background textures. But as you mentioned the texture must not contain distinct patterns otherwise it would be obvious. This can be used as a start point for texture generator
Morphing
There are vector and raster morphs out there depend on the content of image. You can try to use simple raster morph done by Linear interpolation (if resolution is the same which is your case) but this can make the texture blurry which can be disturbing on some images. For starters you can try to morph texture and its mirror together:
This is cosine weight distribution (50%:50% on sides and 100%:0% in the middle):
This is constant weight distribution (50%:50%):
adjusted texture generators
You can adjust your current texture generator to render seamlessly
create/use seamless texture background (created by #1,#2 or even #3)
add random number of random features with looped x axis
so if x is going out from the left it will go in from the right ...
x' = x%xs where xs is texture x-resolution

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

Changing scale of mesh changes lighting brightness of scene?

I needed to refactor my custom mesh creation a bit
from:
create mesh of unified sizes (SIZE,SIZE,SIZE), than scale them as needed (setting scale for each axis)
to:
create mesh with correct size, do not scale later
meshes are custom generated (vertices, faces, normals, uvs), nothing of this process was altered, worked like a charm before
=> resulting meshes are the same size, position, etc.
The whole scene setup stays the same: lights, shadowing, materials, yet when using the second approach the whole lighting is very very bright and super reflective, is that a known issue?
material used is MeshPhongMaterial with map, bumMap, specMap, envMap
using three.js r68, no error/warning in console
before:
https://cloud.githubusercontent.com/assets/3647854/3876053/76b8f260-2158-11e4-9e96-c8de55eaec9a.png
after:
https://cloud.githubusercontent.com/assets/3647854/3876052/76b7fa86-2158-11e4-9393-8f3eece04c0b.png
Did you rescale the normals in the mesh?
The mesh format probably needs normalized normals, in which case, the new normals are now incorrect, but would've been correct, if you hadn't rescaled.
Alternately, you say the lights haven't been changed, maybe they need to be appropriately redirected in the scene. (Assuming you're applying different scaling factors in each axis.)

Resources