This is an example of a workflow from blender to R3F, to generate a glossy water like material and using hdr images for realistic light which affects the 3D objects in a scene.
Here is the codesandbox:
I created a really basic purple island with a plane lowered to look like a small pond.
Make sure you select the object you want to add a shader material too and then click new. Here is the shader node graph I created:
The key bit is this:
I am in the viewport shading to view the result of the shader node graph:
We setup a texture coordinate node, hook it up to a mapping node, connect this to a noise texture and then connect this vector to a bump map.
This bump map will then give us a normal which we can hook upto the BSDF Principled material’s normal input.
What is a normal?
Well, in laymans terms or the way I have learnt about it.. a normal map is made of normals and these normals determine how light interacts or reflects of a material and impacts what we see.
So we are manipulating the normals using a noise texture, the noise pattern is essentially transfered to the normals and therefore how we see the light reflected off the material.
This is the output of setting up this shader material:
Unfortunately GLTF exporter is quite limitted and therefore we cannot export complicated node setups like this.
So we need to bake the normals.
Go to the render properties tab and click on cycles:
Create an image in the shader node graph:
The next part I created a plane over this island and lowered it to look like a pond, subdivided it a few times and then used the laso selector to select vertices around the pond and deleted the rest.
The important part for baking is you will need a uv map for it to work correctly. So in this circumstance I selected the modified plane and smart uv project:
Now go back to the shader editor and select the none connected image texture. Go to the render tab, make sure cycles is selected and select image texture in the baking tab along with just normals (not combined):
Wait for it to bake and then connect the normal map in the image texture node you had selected,to the normals input of the Principled BSDF material.
This way you can check the output of what you just baked. You can play around with the noise parameters to get different effects.
In the codesandbox i noticed that a point light in the sandbox wasnt rendering the same results in the gltfViewer or blender, so I then started researching realistic lighting and HRD images poped up.
A HDR image emits light onto all the objects in the scene, in a realistic way. Here is a place you can get some free HDR images from.
Here is the result using a HDR image:
Here is the result without a hdr image and just adirectional light:
The way I use this hdr image is like so:
1<Environment files={"HDR_029_Sky_Cloudy_Ref.hdr"} path={"/"} />
This is a useful helper from drei helpers, it will load the hdr im age into the scene.
Final Thoughts
So we have gone through a workflow of how to get a glossy water like material outputted to a R3F project.
Using hdr images to light the scene. Giving realistic light.
One way to improve would be to add waves to a vertex shader in a shaderMaterial.
Until next time!
