How is it that the texture for a beat is applied different objects in this moonrider project. First, I see that a beat material is defined using this.beatsTexture:
https://github.com/supermedium/moonrider/blob/b24431261dca9c8f5df717a5518983f69eeb58e4/src/components/materials.js#L241
... and when I go to the texture, I see a single texture being generated for all of the various colors.
https://github.com/supermedium/moonrider/blob/b24431261dca9c8f5df717a5518983f69eeb58e4/src/components/materials.js#L474
What I can’t trace down is:
How is this texture being used to identify different colors with the different beats (e.g. red vs blue)?
How can view the results of this texture easily to be able to debug?
Where is the logic where this texture’s coords are translated for the different beats to show the correct colors?
Thank you for the help!!!
To try to help with #1:
In the first file you linked, after the texture is define, a few materials are also defined which use that texture. Each of the materials specifies a different color (scheme.primary and scheme.secondary) which can be used to tint the texture being applied to the object. When an object collides with the mesh that uses the material, one could determine the color by checking something like mesh.material.uniforms.color.value and seeing if it were equal to the primary or secondary color, for example.
Related
I have an instance using Drei library with a plane geometry.
According to a state, I would like to display different materials for each instance:
state is false: display a standard material with a simple color
state is true: apply a different texture (an image)
Each instance has its own state (for example 20% can be true and 80% can be false, or another ratio)
What would be the best way to do that?
Retained solution: Instanced Attributes
As mentionned by #Bhushan Wagh, the idea is to store the texture state inside a geometry attribute. Then, you can access this data in the shaders in order to apply a custom logic. You can follow his codesandbox for the R3F solution, or this one for the drei instance solution.
Investigated solutions
Having 2 distinct instances (one for the colored material, one for the image texture):
it's ok when we have only 2 states, but what if we have like 10 possible states? (What would be the best solution in this case?)
Represent a plane with a boxGeometry and display the proper face according to the state
It's also only working when we only have 2 states and are in 2D
I don't think you need to change the material if you just wanna toggle between plain color and texture. You can do this doing some changes in shader of material where you pass the vec4 to gl_fragColor in fragment shader based on the state, you can pass the state as attribute to the mesh, since you using instanced mes you can use the instancedAttribute. I had the codesandbox for solution for using different textures on each object of instanced mesh so I made a changes in that code to solve your problem ( or at least what I think is solution) https://codesandbox.io/s/toggle-texture-of-instanced-mesh-ptcvbb You can toggle state of each plane by clicking on it. and I think this should work even with more than 2 states, you can represent the states with number and based on number you can select particular texture from texture array passed as uniform.
I'm currently rendering a skybox to a THREE.CubeCamera target and am then using that target as the environment map on a material. The idea being that I want to have the colour of a cube affected by the colour of the sky around it, though not fully reflecting it (like how a white matte cube would look in the real world).
For example, here is what I have so far applying the environment map to a THREE.LambertMaterial or THREE.PhongMaterial with reflectivity set to 0.7 (same results):
Notice in the first image that the horizon line is clearly visible (this is at sunset when it's most obvious) and that the material is very reflective. The second image shows the same visible horizon line, which moves with the camera as you orbit. The third image shows the box at midday with blue sky above it (notice how the blue is reflected very strongly).
The effect I'm trying to aim for is a duller, perhaps blurred representation of what we can already see working here. I want the sky to affect the cube but I don't want to fully reflect it, instead I want each side of the cube to have a much more subtle effect without a visible horizon line.
I've experimented with the reflection property of the materials without much luck. Yes, it reduces the reflection effect but it also removes most of the colouring taken from the skybox. I've also tried the shininess property of THREE.PhongMaterial but that didn't seem to do much, if anything.
I understand that environment maps are meant to be reflections, however my hope is that there is a way to achieve what I'm after. I want a reflection of the sky, I just need it to be much less precise and instead more blurred / matte.
What could I do to achieve this?
I achieve this writing my own custom shader based on physically based rendering shading model.
I use cook-torrance model that consider roughness of the material for specular contribution. It's not an easy argument that I can talk in this answer, you can find great references here http://graphicrants.blogspot.it/ at the specular BRDF article.
In this question you can find how I achieve the blurry reflection depending on material roughness.
Hope it can help.
I solved this by passing a different set of textures that were blurred to be the cubemap for the object.
Three.js - How to change a texture of a 3D model in only one specific point so that not all the model changes texture ?? I have the json file of the model if anyone would like to see it. TIA!
I suggest you take a look at THREE.MeshFaceMaterial -- use this to apply different materials to different parts of a single mesh. MeshFaceMaterial lets you have a group of different "regular" materials, each of which may have a different textures, and then assign on a per-poly basis. The assignment happens in the geometry object. See http://threejs.org/docs/#Reference/Materials/MeshFaceMaterial for docs.
I would like to upload a mesh with color coded scientific data in three.js. It should result in a nice shape with a realistic shadow, but the object's color itself should not depend on the position relativ to the light (in particular the side facing the light source and its opposite) in order for the color to remain in accordance with the data scale.
Is there an object property that I can set to fulfill this requirement?
If not is there a different workaround?
The simplest way is to use MeshBasicMaterial() http://threejs.org/docs/#Reference/Materials/MeshBasicMaterial which is not affected by the light.
I'm trying to make an environment map which is in the form of a cube that has images mapped onto particular faces to give the illusion of being in the area (sorta like google's street view)
I'm trying to do It in glgehowever, with my limited experience, I only know how to map one texture to a whole mesh (Which is what I'm doing at the moment). If I were to create 6 different textures, would it possible for me to specify the faces that those textures should be loaded to?
You could generate the six faces of the cube as separate objects and use a different texture for each. Alternative is to set different texture coordinates for the different faces of the cube.
If you want ready-to-run code, three.js has a couple of skybox examples. E.g. http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
You should look at "UV Mapping". Check this example. Roughly, UVs describe how the polygons are mapped (in x,y) on the texture.
Sounds like you want a cube map texture — it takes six separate images, and you lookup in it with a direction vector rather than (u,v) coordinates. They are the usual way to do environments. Cube map textures are available in WebGL.