Quite a while ago now I was inspired by a piece of work which Lusion worked on Turn of the Screw. I thought to myself along time ago how can this be done?
Recently I thought of unity again. Originally I didn’t really consider this seriously as I was under the impression shaders wouldnt work on webgl builds.
I do stand corrected though! the URP (universal render pipeline) actually has really good support for webgl builds. The only downside is that you cant do unity on mobile and if you do sort out the memory issues on mobile, the webgl builds will only work on the top tier hardware.
So what can be made with something like unity?
The project
I have been doing some studying for a while now and looked at quite a few of the settings on unity. This gave me a good grounding in what to do. Here is a timelapse of what im about to describe.
The project will consist of creating a terrain, texturing it and then using terrain tools to place trees and details.
And finally, do a small camera animation on load of the scene.
Terrain
You can create a terrain by going to Game Object —> 3D Object —> terrain.
I created a folder in the project window at the bottom of the screen to store all my materials. I then right clicked in this folder on the project pane window, which gives you the option to create a material. I then set this material to a browny color.
If we go back to the inspector window on the left with the terrain selected you will find the terrain settings on the far tab. You can then set the material here like so.
Then when you select the terrain you will get several options on the right inspector window. One of which being - Paint Terrain. This will have a raise or lower terrain option we will be using. Mouse click on the terrain to increase height and ctrl + left mouse click click lowers the terrain under the brush.
If you see the video in this post on linkedIn then you will see I played around with something until I was happy with it. Keeping in mind I wanted to try and have the terrain higher at the edges of my world map.
Packages we are going to use
‘Cartoon & Stylized HDRI sky Pack 02’ and ‘Stylized Nature Pack’ are the two packages I am going to use. The first which will provide the background and some of the lighting to the scene and the final one for the grass textures and trees.
You can go to the packages via the window tab at the top and then install and import each of the above packages. Once they are imported you should see them in the project window at the bottom.
One thing you will probably see is that the assets or prefabs are purple, this will be because you will need to set them up if they were built in a different pipeline to the one you are in.
This is relatively straight forward. Click on the prefab and then in the inspector window on the right you can go to the shader material and go nature —> and then what ever shader we need, wether that be bark or leaves.
HDRI background image
The background image I chose was this one
The way I used it is dragged onto the background of the window
Placing trees onto the terrain
The terrain tools has a scattering tool, there are better paid versions of this but for now as Im learning this will do. Click on the terrain, go to the last tab which is for the settings and reduce the width and height to 100 x 100. Then go to this tab - Paint Trees.
While here ‘edit trees’ and then add the prefab we just setup for the tree. This is a little confusing as we can use other prefabs which aren’t trees here, rocks for example or anything we want to scatter.
Select the tree we just added in the list, after we could either mass place or select a brush and start painting onto the terrain.
For now all we will do is mass place and use ctrl + left click to deselect trees on lower parts to create a sort of opening.
By this time you should have a terrain which we have modelled and textured, along with a spread of trees mass placed and selectively removed in areas.
You can change the color of the leafs and bark on this nature pack’s trees. This will allow you to coordinate the color scheme in the project. To do this just select the tree and go to the shaders at the bottom of the inspector window.
One thing to bare in mind is with the terrain selected you will have to go to the last tab, which is terrain settings and then you will probably need to increase detail distance from 80 to something like 150 and then change when we start the billboard effect. To save system usage, unity can start to use billboards at a certain distance from the camera, we want this to be quite far away.
Also make sure when you add trees to the pallete that there is no bend and that randow rotation is selected on the tree.
Placing grass textures onto the terrain
The next step I want to try and accomplish is spreading the grass onto the terrain, to do this go to the terrain details section and add a new grass texture like the one below. I used grass_4.png from the nature pack. It should be a white texture with opacity around the solid white.
With the cursor over the terrain, you can start clicking and placing the grass. I tried to keep the grass solid in the opening and then patchy under the trees.
The colors are entirely your decission but try and make it so the HDRI sky and tree colors are similar to maximise the effect of the scene.
Remember you can always do crt + left click to remove grass or do ctrl + z to undo.
Particle effects from Nature asset pack
If you go to the Nature asset pack in the project window you can see that there will be 2 effects we will want to use. These are particle effects. Light shafts and dust particles, with either one of these selected you can drag onto the scene and position + rotate them for maximum effect.
This part of the work is very simple as we are using a commercial asset pack from the asset store, if we were to model or use graphs in unity it would get more complicated!
Post processing in the unity scene
There is a package called post processing. This is the package we will use for vinigarrete and bloom. There are several steps we need to complete before the effects can be applied.
First of all go to the package manager and install/import post processing. Once complete, if you right click in the root of your project in the project window, you should see the postprocessing volume profile option.
So we need to do a few things before we can use bloom, create a postprocessing volume in the scene (top menu —> GameObject —> 3D Object —> Post -process Volume), create a Post processing Profile (project window —> right click —> create —> Post-processing Profile), drag the profile on the camera, and with the camera selected create a post processing layer component, select a postprocessing layer or create and select the layer, ensure the layer is selected on the volume we created earlier and there ya go, we should be able to go onto the volume and select bloom etc.
Camera animation
For the camera animation we need to create a camera animation controller and animation clip. To do this go to the project window and ricght click —> create —> Animation Controller and Animation.
Drag the animation onto the controller and then drag the controller onto the camera in the hierarchy window. Having done this we can now select the camera and animate! First off, double click on the animation clip.
The first key frame is done for us, but we can add a property with the camera selected, I did position.
We can then move the frames forward slightly and put a new key frame in, this way the camera will animate when we play the animation clip.
Netlify and webgl builds
The key thing I wanted to do is to get this on a website. The critical information you need to know is this does not work on mobile devices, there are memory problems which cause the unity project not to load on mobile. And unity even officially says it doesnt support mobile devices for webgl builds.
With this in mind we can do a webgl build and compress the build files. Once we have the build files, we can place them in the public folder of our react project (mine is built with nextjs, but in general any react project would have them here). Here is my webgl build component.
1"client";2import { useState, useRef, useEffect } from "react";3import { Unity, useUnityContext } from "react-unity-webgl";45const WebglBuild = () => {6 const { unityProvider } = useUnityContext({7 loaderUrl: "/build/test2.loader.js",8 dataUrl: "/build/test2.data",9 frameworkUrl: "/build/test2.framework.js",10 codeUrl: "/build/test2.wasm",11 });1213 return (14 <Unity15 unityProvider={unityProvider}16 style={{ width: "100%", height: "100%" }}17 />18 );19};2021export default WebglBuild;
And to serve the compressed files you have to tell netlify to give certain files a header when you request specific files, which will cause the compressed one to be donwloaded and un compressed. Here is my netlify.yml file.
1# Define the headers to be used on all paths2headers:3 - for: "/*.js"4 headers:5 Content-Encoding: "br"6 - for: "/*.data"7 headers:8 Content-Encoding: "br"9 - for: "/*.wasm"10 headers:11 Content-Encoding: "br"
Essentially if we request a js, data or wasm then we want to serve the br compressed file format. The browser will automatically unwrap this compressed file.
