# Creating a Local Scene in Webaverse

## Overview

In this tutorial we will run through how to set up a local instance of Webaverse. Using a local version can be great for testing purposes when building virtual worlds and experiences. Before we get into building, we'll need to download and install some necessary tools to get us going.

## Installation

Download and install [Git](https://git-scm.com/downloads)


Download and install [GitHub Desktop](https://desktop.github.com/)


Download and install [Node.js](https://nodejs.org/en/)


Download and install [Visual Studio Code](https://code.visualstudio.com/). This is optional but we prepare to use some form of IDE/text editor later on.


Restart your computer and open Command Prompt


In Command Prompt, follow the below instructions

# 1. Clone the GitHub Repository
git clone --recurse-submodules https://github.com/webaverse/app.git

# 2. Access the repository
cd app

# 3. Install Dependencies
npm install

# 4. Run the app
npm run dev


## Access

You then need to use the URL referenced in the console (see bottom of previous image) in your browser to access the local version of Webaverse


You may get a safety warning from your browser. If this is the case and you want to proceed, click *Advanced Settings* and *Proceed to localhost (unsafe)*


Congrats. Now you're up and running with a local version of Webaverse.

## Creating a Local Scene


Before we finish, we'll create a new .scn file to display an environment and an avatar we can equip to ourselves for in-game use. I have taken the [environment](https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/VC/glTF-Binary/VC.glb) from the glTF Sample Models GitHub repo and the [avatar](https://hub.vroid.com/en/characters/1248981995540129234/models/8640547963669442173) from the VRoid Hub sample avatar collection. Simply access these links and click *Download* or *Use This Model* (for VRoid Hub).


Once downloaded, go to your Webaverse app directory. Create a new folder (I'll call mine *test-models*) and drag the downloaded models into this folder. Rename your models appropriately. I'll be using *environment.glb*, *npc.glb* and *avatar.vrm*.


Next, let's go back to the *scenes* folder and open up block.scn with Visual Studio Code or an alternative IDE. We'll be using this file as the baseline for our new environment. Immediately save this file as a new .scn file called 'test-environment'.


Open up the *scenes.json* file in the scenes folder and add *test-environment.scn* to the list.


Go back to your Webaverse local instance running in browser and select the *test-environment.scn* file. You're now running an instance of your new scene file and whatever is changed and saved to the .scn file will update when you refresh your browser.


Go back to the *test-environment.scn* file. Remove everything below the directional light object.

Now that we're working with a clean slate, we're going to start off by adjusting the render settings slightly to add in some fog and depth of field.

    {
      "type": "application/rendersettings",
      "content": {
        "fog": {
          "fogType": "exp",
          "args": [[255, 255, 255], 0.001]
        },
        "dof": {
          "focus": 1.5,
          "aperture": 0.0004,
          "maxblur": 0.002
        }
      }
    },

Next, we want to place the environment in the center of our scene and scale it up by 10x.

    {
	"position": [
		0,
		0,
		0
	],
	"scale": [
        10,
        10,
        10
	],
	"start_url": "/test-models/environment.glb"
    },

Finally, we will add our avatar and put it two meters on the right of us. We will also make this object dynamic so we can equip it for use.

    {
	"position": [
		2,
		0,
		0
	],
    	"start_url": "/test-models/avatar.vrm",
        "dynamic": true
    }

Ensure that your file is saved, head back to your browser and refresh. You should now have a uniquely rendered city scene with a new equipable avatar.


Now that you've created your scene file, test out different parameters and have a look at others files in the scenes folder to add in other objects. Experimentation will lead you to better understand what is possible in Webaverse.

:::info
*Meta Mike is the co-founder of VERSED and leads Partner Success at GigLabs. He has a passion for contributing to the education and enablement of the open metaverse.*
:::

Follow Meta Mike
[LinkedIn](https://www.linkedin.com/in/itsmetamike/) | [Twitter](https://twitter.com/itsmetamike) | [Website](https://hackmd.io/@metamike)