FDNavigate back to the homepage

Glossy Water From Blender to R3F Using Light Emitting HDR Images

Rick
January 16th, 2022 · 2 min read

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:

Blender shader node graph for glossy water

The key bit is this:

Bump map nodes in blender

I am in the viewport shading to view the result of the shader node graph:

View port shading

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:

output of glossy shader node graph

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:

Render tab on Blender

Create an image in the shader node graph:

Image texture for baking

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:

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):

Baking tab in blender

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:

Codesandbox with hdr image

Here is the result without a hdr image and just adirectional light:

Codesandbox without a hdr image

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!

More articles from theFrontDev

Mosaic Tiling With Semi Seamless Textures in a R3F or Threejs Setting

Using GLSL shaders to tile a texture to avoid none repeating patterns or minimize it by rotating UV's around a pivot point for each tile. Essentially mosaic rotation or UV rotations.

January 12th, 2022 · 2 min read

Height Dependant Node Based Shader Baked to a Textures for GLTF models

Using blenders shader graph to generate a height dependant mixture of two textures and then baking this to a texture for use in a GLTF Model.

January 4th, 2022 · 3 min read
© 2021–2024 theFrontDev
Link to $https://twitter.com/TheFrontDevLink to $https://github.com/Richard-ThompsonLink to $https://www.linkedin.com/in/richard-thompson-248ba3111/