I have a question about texture mapping and repeat with THREE.js. In my scene there are several thousands of cubes with different height. All shall have the same material with a texture which shall be repeated depending on the height of the object. Since repeat.y isn't the same for each object, I'm afraid I cannot use the same material for all cubes although the texture is the same. Is that right? Or is there a way to use the same material and update the repeat value automatically?
Thank you very much in advance.
Related
I am creating a scene with several thousand cubes, each of which can be translated, scaled and rotated.
Initially, I tried creating a cube geometry, applying the transformations, creating a mesh with my material and adding it to the scene. That worked but was very slow because of all the draw calls.
So now, for all the cubes, I create a THREE.BoxGeometry(1,1,1), and merge it with a single THREE.Geometry() each time before finally creating a material and a single mesh and adding it to my scene.
The performance is drastically improved but I don't know how to apply a translation (XYZ), scale (XYZ) and rotation (quaternion) to each box before merging it. Can someone point me at the right syntax?
Secondly, if I merge my geometry like this, is there still a way to pick out a single box with a raycaster? Typically I've used the object name on the mesh but that's not relevant anymore.
Thank you.
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
I am building quite a complex 3D environment in Three.js (FPS-a-like). For this purpose I wanted to structure the loading of textures and materials in an object oriënted way. For example; materials.wood.brownplank is a reusable material with a certain texture and other properties. Below is a simplified visualisation of the process where models uses materials and materials uses textures.
loadTextures();
loadMaterials();
loadModels();
//start doing stuff in the scene
I want to use that material on differently sized objects. However, in Three.js you can't (AFAIK) set a certain texture scale. You will have to set the repeat to scale it appropiate to your object. But I don't want to do that for every plane of every object I use.
Here is how it looks now
As you can see, the textures are not uniform in size.
Is there an easy way achieve this? So cloning the texture and/or material every time and setting the repeat according to the geometry won't do :)
I hope someone can help me.
Conclusion:
There is no real easy way to do this. I ended up changing my loading methods, where things like materials.wood.brownplank are now for example getMaterial('wood', 'brownplank') In the function new objects are instantiated
You should be able to do this by modifying your geometry UV coordinates according to the "real" dimensions of each face.
In Three.js, UV coordinates are relative to the face and texture (as in, 0.0 = one edge, 1.0 = other edge), no matter what the actual size of texture or face is. But by modifying the UVs in geometry (multiply them by some factor based on face physical size), you can use the same material and texture in different sizes (and orientations) per face.
You just need to figure out the mapping between UVs, geometry scale and your desired working units (eg. mm or m). Sorry I don't have, or know a ready algorithm to do it, but that's the approach you probably need to take. Should be quite doable with a bit of experimentation and google-fu.
Is there a way to set the color of an entire THREE.Geometry object using three.js? There are a few naive ways I could do this, but none of the methods seem ideal.
I could clone a material and set a different color for each geometry. Essentially, each geometry would have a one-to-one relationship with a material. However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
I could also use a single white material and color all the faces of the geometry instead. However, there would create much repetition of the same color objects, since each geometry will only have one color but many faces.
Is there a "proper" way of doing this with three.js?
However, this would create many heavyweight material objects and possibly unnecessary extra shaders on the GPU.
It should not. Shaders will be reused if they're the same. So creating as many materials as geometries should be ok.
Let's say I have N pictures of an object, taken from N know positions. I also have the 3D geometry of the object, and I know all the characteristics of both the camera and the lens.
I want to generate a unique giant picture from the N pictures I have, so that it can be mapped/projected onto the object surface.
Does anybody knows where to start? Articles, references, books?
Not sure if it helps you directly, but these guys have some amazing demos of some related techniques: http://grail.cs.washington.edu/projects/videoenhancement/videoEnhancement.htm.
Generate texture-mapping coords for your geometry
Generate a big blank texture
For each pixel
Figure out the point on the geometry it maps to
Figure out the pixel in each image that projects onto this point
Colour the pixel with a weighted blend of all these pixels, weighted by how much the surface normal is facing the corresponding camera and ignoring those images where there's another piece of geometry between the point and the camera
Apply your completed texture to the geometry
Google up "shadow mapping", as the same problem is solved during that process (images of the scene as seen from some known points are projected onto the 3D geometry in the scene). The problem is well-understood and there is plenty of code.
I'd suspect that this can be done using some variation of projection maps mixed with image reconstruction.
Have a look at cubemapping. It may be useful. You may want to project another convex shape to the cube and use the resulting texture as a conventional cubemap texture.