Perhaps something like this?
chromeMaterial = new MeshStandardMaterial({
// map: diffuseMap.texture,
roughness: 0.2, // 0 for max reflection
// roughnessMap: roughnessMap,texture,,
metalness: 0.9, // 1 for max reflection
// normalMap: normalMap.texture, // if you need some roughness, you can add this
envMap: cubeRenderTarget2.texture,
envMapIntensity: 1, // 1 = default
});
I used the three.js example to arrive at the settings for roughness and metalness.
I am not sure if the roughness alone will actually add some “grain” to the material that you can see, so you may have to add some kind of diffuseMap.texture, roughnessMap.texture or normalMap.texture. With the diffuseMap.texture, you could add some slight color variations. The roughnessMap.texture (a simple black and white texture) will simply make some parts rougher - and thus less reflective - than others. The normalMap.texture will make the texture appear to have small bumps.
This is where things get fun because you can experiment with different color schemes. For example, in your picture of a real steam engine, the spokes look like they are made from cast iron - which I think is typical. Three.js is fun because you can add shadows and all kinds of enhancements.
2 Likes
@phil_crowther Phil, thanks for your suggestions and the pointer to the Three.js example. I’ll hunt for some suitable bump and/or normal bitmaps and will conduct some experiments
On a perfectly related note: would a polished chromium surface in reality not be equally indifferent to rotations as far as reflections are concerned? In a way, intentionally adding the simulation of bumps and roughness to a material would make it appear more realistic looking on the one hand. While on the other hand chip away from the current, hyper-realistic look of the animation.
I’m a little torn between the infinity of possibilities.
You are also correct in your observation, that the “real” flywheel is indeed cast steel. The more I think about it, the more I’m inclined to leave the perfect reflection on the chromium parts, while adding a bumpy surface to the spokes of the flywheel.
The one I had the hardest time visualizing was the Exzenter. And I see that you have added a helper to address that problem. Regardless of what you do, it looks great!
2 Likes
Marvelous visualization.
But a critical element is very difficult to see:
The eccentric rotation of the disc powering the valve actuator is invisible, because the surface is too perfect. It seems to be magical or liquid, since the lighting, details and reflections all make it seem to not spin at all.
Some irregular texture (dirt, oxidation) or structural detail (spokes, holes) or even a decorative element (logo, maker’s mark) would make this elusive motion easier to see.
Similarly, the transverse axle and the outer rim of the flywheel also suffer from excessive perfection and seem disappointingly immobile.
3 Likes
@DovJacobson Dov, thank you for your enthousiastic and constructive comment. Regarding excessive perfection, you aren’t the first one to mention this (among others: by @phil_crowther , see above). Still others (thinking of @prisoner849) praise the “neatness” of the scene.
Personally, I like this hyper-realistic style, which however will not keep me from experimenting with bump maps and/or normal maps. Adding my initials via a decal sort of thing does seem like a good idea though. Thanks for that, too.
The elusive motion of the excenter has not been missed by myself. That’s why I added the “ExzenterHelper” via UI option. May I suggest you try the “ExzenterHelper” by checking the respective UI checkbox?
Aha! Exzenter Helper is a useful feature.
However it would be even better if we can preserve the photo realism.
Thanks for your note and for sharing this work.
I like that big wheel, so I tried to make one with procedural roughness on its rim
Demo: https://codepen.io/prisoner849/full/qBwQxQy
5 Likes
Very cool! Reflective, yet with traces of the preceding lathing operation. That indicates the proper setting of u-v coordinates, if you use those at all.
As a hobbyist lather , I would criticize that there are visible traces at all. I treated my own real-life copy, which of course initially had those traces, with various sanding rounds, using ever finer grain down to 1200. Finally, I added a polishing run so its surface is almost mirror-like. Pretty much like in my animation
As a hobby software developper, I admire your skill with shaders and your creativity. Sensationell und bewundernswert!
1 Like
@prisoner849 , @phil_crowther , @JohnPoole, @DovJacobson
Gentlemen (I didn’t notice any Ladies around),
giving in to repeated popular requests I released version 1.02 of my steam engine visualization. The most prominent changes are:
- reversed sense of rotation to match the video of the supplier of the kit
- added four plugs to visualize the ducts which are not available for airflow, Since this handy drill bit
https://vielzutun.ch/wordpress/wp-content/uploads/2024/04/knickbohrer.jpg
hasn’t been invented yet, each manufacturer is forced to make due with traditional drill bits and compose the necessary ducts from three individual bore holes. The surplus openings in reality get plugged by soldering the valve block against flattened surfaces of the main cylinder.
-
giving in to repeated popular request, I changed the material of the excenter in such a way, that it now displays the previously employed 2x2 pix checkerboard texture of the excenterHelper as a bump map. Which now appears as very fine and subtle lines across the flat excenter surface, maintaining its reflectivity. All in all, I like this solution so much, that it obsoleted my UI option “ExzenterHelper” altogether. Thanks everyone for nagging me just perfectly
-
P.S.: I also exchanged the environment map with a clean one without the vertical red debugging lines.
This is what my material definition now looks like:
exzenterMaterial = new THREE.MeshStandardMaterial( {
roughness: 0.0, // 0 for max reflection
metalness: 1.0, // 1 for max reflection
bumpMap: myChecker, // my 2x2 pix checkerboard data texture
bumpScale: 1.0,
envMap: myTexture, // my equirectangular bitmap without red debug lines
} );
The link has stayed the same:
https://vielzutun.ch/wordpress/Danni_animation/Three.js/Main.html
Check it out and let me know what you think. Thanks.
1 Like