Digital Bacon

Introduction

Digital Bacon is an application to create beautiful immersive 3D websites that run on your phone, computer, and VR headset. Some parts of constructing a 3D virtual world may be unfamiliar to you, so this guide hopes to make understanding these new concepts a little easier

Getting Started

Getting started is easy, just go to https://digitalbacon.io/app and click on the start button!

Moving Around

Moving around varies depending on what type of device you are on. Please see the appropriate section for your device

Computer

You can move forwards, backwards, left, and right using the arrow keys or the WASD keys
The Spacebar and Shift keys will make you fly up and down respectively
You can click anywhere on the scene (wherever there isn't an editable asset) and drag the mouse to rotate the screen around your avatar
Scrolling in or out will change the distance from your screen to the Avatar

Mobile / Tablet

You can move forwards, backwards, left, and right using the joystick in the bottom left corner of the screen
The "UP" and "DOWN" buttons in the bottom right corner of the screen allow you to fly up and down
You can press down anywhere on the scene (wherever there isn't an editable asset) and then drag your finger to rotate the screen around your avatar
Zoom in or out by using two fingers to move away or towards each other

VR Headset

Joystick controls are specific to your left or right hand. You can swap them under Editor Settings in the menu

Move around using the left joystick (by default)
Snap rotation + flying up and down can be done with the right joystick (by default)

Visual Editing

Visual Editing varies depending on if you are on a VR headset or not. Please see the appropriate section for your device

Computer / Mobile / Tablet

To begin editing assets on your device, bring your mouse over the object you want to edit and click on it (or just tap on it for mobile + tablet users)

If a yellow bounding box does not appear when hovering over the asset, you may need to enable visual editing for it through the menu

Now the editing pane should appear on the left and the asset should have the transformation widget attached to it. See the following table for what you can do with each of the editing options

Place	Clicking on the surface of any asset in the scene will place the active asset there. Afterwards, the editing mode will reset to the most recent one
Move	Clicking on different parts of the transformation widget and then dragging the mouse will move the asset in the following ways The red, green, and blue arrows move the asset along the x, y, and z axes respectively The squares between the arrows let you move it along both axes at the same time The center of the widget allows you to move the asset up/down/left/right relative to the screen
Rotate	Clicking on different parts of the transformation widget and then dragging the mouse will rotate the asset in the following ways The red, green, and blue circles rotate the asset along the x, y, and z axes respectively The outer circle rotate the asset around the direction the screen is facing
Scale	Clicking on different parts of the transformation widget and then dragging the mouse will scale the asset in the following ways The red, green, and blue cubes scale the asset along the x, y, and z axes respectively The squares between the cubes let you scale it along both axes at the same time The center of the widget allows you to scale the whole asset at the same time
Clone	Creates a copy of the active asset and places it slightly farther towards the screen and right side
Delete	Deletes the active asset
Close	Closes the Visual Editing Pane

VR Headset

There are different "Hand Tools" that change the way in which you can visually edit assets. These tools can be chosen from within the Menu. See the following table for what each tool allows

Grabbing it using the Grip button

Pointing towards it and pressing down on the trigger

Edit	When using the edit tool you can Grab assets to move and rotate them Grab assets with both hands to scale them up or down
Copy / Paste	With this tool you can Copy an asset with the left controller by either grabbing it or pointing at it and then pressing down the trigger Paste the asset wherever the preview is by pressing the grip of the right hand If your right controller is pointing towards the surface of another asset, you can paste it on that surface by pressing down on the right hand's trigger
Delete	Delete an asset with either hand by
Translate	Assets grabbed with the grip button can be moved around without affecting their rotation
Rotate	Assets grabbed with the grip button can be rotated without affecting their position
Scale	Assets grabbed with the grip button can be scaled up/down by moving that hand farther/closer to the asset's location

The Menu

Computer, Mobile, and Tablet users can pull up the menu by pressing the menu button at the top right corner of the screen

VR Users can pull up the menu by using the primary button on either controller. You can grab the menu to move it around and interact with menu items by pointing at them and pressing down on the trigger

The Menu can be broken down into the following five sections

Hand Tools

Specific for VR Headset Users. Please see section above for what each tool does

Library

Where you can edit all of the assets in your website. For more information on how you can configure different asset types through the menu, see the relevant sections for Models, Images, Shapes, Lights, Materials, Textures, Audio, Components, Systems, and Other Assets

Settings

In this section you can change the background (skybox) of your website, the settings your website's users will have, your own settings while editing your website, and update your avatar

Project File

Where you can save / load your project file to your device or Google Drive. You can also start a new project without any assets besides ambient lighting

Connect with Peers

This section allows you to host/join multi-user experiences and visit or edit websites with your friends

Models

All models have the following parameters that can be edited in the menu

Visually Edit	Checkbox Enables visual editing for the asset
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Images

All images have the following parameters that can be edited in the menu

Visually Edit	Checkbox Enables visual editing for the asset
Double Sided	Checkbox If checked, the image will be visible from both sides, otherwise just one
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Shapes

Digital Bacon provides the following list of shapes you can add to your website

Click on any of these links to jump straight to the shape you're interested in

Box
Circle
Cone
Cylinder
Plane
Ring
Sphere
Torus

Box

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Width	Number Length of the box along its x-axis
Height	Number Length of the box along its y-axis
Depth	Number Length of the box along its z-axis
Width Segments	Number How many segments the width of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties
Height Segments	Number How many segments the height of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties
Depth Segments	Number How many segments the depth of the box is made up of. This affects the wireframe of the box which has implications for certain Material properties
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Circle

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Radius	Number The length from the center of the circle to its edge
Sides	Number How many sides make up the edge of the circle
Degrees	Number How many degrees of the circle are visible
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Cone

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Height	Number How tall the cone is
Radius	Number The length from the center of the cone's circular base to its edge
Sides	Number How many sides make up the edge of the cone's circular base
Height Segments	Number How many segments the height of the cone is made up of. This affects the wireframe of the cone which has implications for certain Material properties
Degrees	Number How many degrees of the cone are visible
Open Ended	Checkbox Removes the circular base of the cone if checked
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Cylinder

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Height	Number How tall the cylinder is
Top Radius	Number The length from the center of the cylinder's top circular face to its edge
Bottom Radius	Number The length from the center of the cylinder's bottom circular face to its edge
Sides	Number How many sides make up the cylinder's curved surface
Height Segments	Number How many segments the height of the cylinder is made up of. This affects the wireframe of the cylinder which has implications for certain Material properties
Degrees	Number How many degrees of the cylinder are visible
Open Ended	Checkbox Removes both circular ends of the cylinder if checked
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Plane

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Width	Number Length of the plane along its x-axis
Height	Number Length of the plane along its y-axis
Width Segments	Number How many segments the width of the plane is made up of. This affects the wireframe of the plane which has implications for certain Material properties
Height Segments	Number How many segments the height of the plane is made up of. This affects the wireframe of the plane which has implications for certain Material properties
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Ring

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Inner Radius	Number The length from the center of the ring to its inner edge
Outer Radius	Number The length from the center of the ring to its outer edge
Sides	Number How many sides make up each edge of the ring
Radius Segments	Number How many segments there are between the inner and outer radius of the ring. This affects the wireframe of the ring which has implications for certain Material properties
Degrees	Number How many degrees of the ring are visible
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Sphere

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Radius	Number The length from the center of the sphere to its edge
Horizontal Sides	Number How many sides make up the surface of the sphere horizontally
Vertical Sides	Number How many sides make up the surface of the sphere vertically
Horizontal Degrees	Number How many degrees of the sphere are visible horizontally
Vertical Degrees	Number How many degrees of the sphere are visible vertically
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Torus

Visually Edit	Checkbox Enables visual editing for the asset
Material	Material Selection Selects the material used for the shape. The material affects the shape's color and appearance. For more details on what they can do, see the Materials section below
Radius	Number The length from the center of the torus to center of the tube
Tube Radius	Number The length from the tube's center to its edge
Radial Sides	Number How many sides make up the torus (2 would turn the torus into a ring)
Tubular Sides	Number How many sides make up the edge of the torus
Degrees	Number How many degrees of the torus are visible
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Lights

Digital Bacon provides the following list of lights you can add to your website. Lights that have visual editing enabled have a visual marker while editing your website. These markers will not appear when you host your website

Click on any of these links to jump straight to the type of light you're interested in

Ambient
Basic

Ambient

Ambient lighting will illuminate all assets equally without any sense of directional light

Visually Edit	Checkbox Enables visual editing for the asset
Color	Color Selection Sets the color for the lighting
Intensity	Number How intense the lighting is
Position	Numbers Only affects visual marker Location of the asset along the x, y, and z axes
Rotation	Numbers Only affects visual marker Orientation of the asset represented as Euler Angles
Scale	Numbers Only affects visual marker How much the asset is stretched along the x, y , and z axes

Basic

Basic lighting acts like a lightbulb emitting light in all directions originating from its location

Visually Edit	Checkbox Enables visual editing for the asset
Color	Color Selection Sets the color for the lighting
Intensity	Number How intense the lighting is
Distance	Number The maximum range of the lighting. If set to 0, there will be no limit
Decay	Number The amount the light dims along the distance of the light
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Only affects visual marker Orientation of the asset represented as Euler Angles
Scale	Numbers Only affects visual marker How much the asset is stretched along the x, y , and z axes

Materials

Materials set the color and appearance of any asset that applies them

Click on any of these links to jump straight to the material you're interested in

Basic
Standard
Toon

Basic

A Basic material provides a coloring that is not affected by lights. This makes it so shapes that use this material have no discernable corners/edges and appear flat

Color	Color Selection Sets the color of the material
Texture Map	Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color
Display	Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through
Transparent	Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map
Opacity	Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect
Alpha Map	Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white
Wireframe	Checkbox If checked, will only display the wireframe of the asset the material is applied to
Environment Map	Texture Selection Optional Selects the texture that will be used to display a reflection off the material. If set, "Color & Environment Blend", "Reflectivity", and "Refraction Ratio" will all affect the appearance of the environment map
Color & Environment Blend	Blends Determines how the surface's color is combined with the environment map. If Mix is chosen, Reflectivity is used to blend between the two colors
Reflectivity	Number How much the environment map affects the surface to create a reflection. 0 means it has no reflection and 1 means it is fully reflective
Refraction Ratio	Number The ratio of the Index of Refraction (IOR) of air divided by the IOR of the material. Only has an affect when the environment map texture has a Mapping set to Refraction

Standard

A material that can create metalic/rough looking surfaces. This material is more graphically accurate at the expense of being less efficient for the computer to run

Color	Color Selection Sets the color of the material
Texture Map	Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color
Display	Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through
Transparent	Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map
Opacity	Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect
Alpha Map	Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white
Wireframe	Checkbox If checked, will only display the wireframe of the asset the material is applied to
Bump Map	Texture Selection Optional Selects the texture that will be used to simulate depth in the material with respect to lighting. The actual shape of the asset is unaffected
Bump Scale	Number How much the bump map affects the material
Displacement Map	Texture Selection Optional Selects the texture that displaces the assets vertices. This affects the actual shape of the asset
Displacement Scale	Number How much the displacement map affects the material
Displacement Bias	Number The offset of the displacement map
Emissive Color	Color Selection Sets the emissive color of the material. This is the color that is emitted (glows) from the material without lighting
Emissive Map	Texture Selection Optional Selects the texture that will be used to apply additional emissive coloring on the material. If a non-white color has been selected for the material emissive color, the emissive appearance will look like a blend between the texture and that color
Emissive Intensity	Number Intensity of the emissive lighting
Environment Map	Texture Selection Optional Selects the texture that will be used to display a reflection off the material. If set, "Environment Intensity" will all affect the appearance of the environment map
Environment Intensity	Number Intensity of the environment map
Metalness	Number How much the material looks like a metal. 0 will give a non-metallic appearance like for stone and wood, while 1 will give a very metallic look
Metalness Map	Texture Selection Optional Selects the texture that will be used to affect the metalness of the material. Areas that have the blue channel of the image being higher will appear more metal-like than areas without blue
Normal Map	Texture Selection Optional Selects the texture that will be used to augment the colors of the material with respect to the direction the surface faces
Normal Type	Normal Spaces If set to Tangent, the color of any portion of the surface is determined by the direction that surface faces. If set to Object, the color of the whole material is determined by the direction the asset itself faces. Material color can still be augmented by the Normal Map for both Normal Types
Roughness	Number How rough the material appears. 0 gives a smooth mirror reflection while 1 would give it a fully diffused appearance
Roughness Map	Texture Selection Optional Selects the texture that will be used to affect the roughness of the material. Areas that have the green channel of the image being higher will appear more rough than areas without green

Toon

A material that gives off a cartoon appearance

Color	Color Selection Sets the color of the material
Texture Map	Texture Selection Optional Selects the texture that will be used to apply additional coloring on the material. If a non-white color has been selected for the material, the appearance will look like a blend between the texture and that color
Display	Sides Selects what sides of the material are visible. If Front or Back Side is selected, the opposite side will be see through
Transparent	Checkbox Enables transparency for the material. If a texture map that uses a png with transparency is selected, that transparency will be appied to this material. Additionally transparency can be added to the whole material using the opacity field or just in certain places by using an Alpha Map
Opacity	Number How opaque the whole material is. 1 is fully opaque and 0 is invisible. Must have Transparent checked to have any effect
Alpha Map	Texture Selection Optional Selects the texture that will be used to determine the transparency of the material. Black areas will make the material fully transparent while white colors will make it fully opaque. All other colors are treated as grayscale and set the transparency based on its closeness to black/white
Wireframe	Checkbox If checked, will only display the wireframe of the asset the material is applied to
Bump Map	Texture Selection Optional Selects the texture that will be used to simulate depth in the material with respect to lighting. The actual shape of the asset is unaffected
Bump Scale	Number How much the bump map affects the material
Displacement Map	Texture Selection Optional Selects the texture that displaces the assets vertices. This affects the actual shape of the asset
Displacement Scale	Number How much the displacement map affects the material
Displacement Bias	Number The offset of the displacement map
Emissive Color	Color Selection Sets the emissive color of the material. This is the color that is emitted (glows) from the material without lighting
Emissive Map	Texture Selection Optional Selects the texture that will be used to apply additional emissive coloring on the material. If a non-white color has been selected for the material emissive color, the emissive appearance will look like a blend between the texture and that color
Emissive Intensity	Number Intensity of the emissive lighting
Normal Map	Texture Selection Optional Selects the texture that will be used to augment the colors of the material with respect to the direction the surface faces
Normal Type	Normal Spaces If set to Tangent, the color of any portion of the surface is determined by the direction that surface faces. If set to Object, the color of the whole material is determined by the direction the asset itself faces. Material color can still be augmented by the Normal Map for both Normal Types

Textures

Textures are images that have been configured for use by materials to alter their look and appearance

Click on any of these links to jump straight to the type of texture you're interested in

Basic
Cube

Basic

A Basic Texture is comprised of a single image with parameters to repeat the image both vertically and horizontally if desired

Image	Image Selection Optional Selects the image that will be used for the texture. If left blank, it will default to being all black
Horizontal Wrapping	Wrapping Type Determines if the texture is repeated horizontally, and if the repetition is mirrored or not
Vertical Wrapping	Wrapping Type Determines if the texture is repeated vertically, and if the repetition is mirrored or not
Horizontal Repeat	Number How many times the image is repeated within the texture. If greater than 1 and Horizontal Wrapping is set to "Clamp", then the left and right edges of the image will stretch until the end of the texture in those directions
Vertical Repeat	Number How many times the image is repeated within the texture. If greater than 1 and Vertical Wrapping is set to "Clamp", then the top and bottom edges of the image will stretch until the end of the texture in those directions
Horizontal Offset	Number How much a single repetition of the image is offset towards the left
Vertical Offset	Number How much a single repetition of the image is offset towards t he bottom

Cube

A Cube Texture is a series of 6 images that map to the surface of a cube. Used for defining environment maps

Images

Image Selection

Optional

Selects the images that will be used for the texture. All images must be the same size and type. If left blank or any images do not have the same size + type of the others, it will default to being all black

Wrapping

Mapping

Determines whether the Cube Texture is used as a reflection map or refraction map

Audio

All audio have the following parameters that can be edited in the menu

Visually Edit	Checkbox Enables visual editing for the asset
Preview Audio	Checkbox Allows you to play the audio while in the Editor
Auto Play	Checkbox If checked, the audio will start playing automatically when the user clicks starts in the Digital Bacon website
Cone Inner Angle	Number The angle (0-360 degrees) of a cone in which the audio does not reduce. 360 degrees would make this a non-directional audio source as audio would travel in all directions equally
Cone Outer Angle	Number The angle of a cone inside of which the audio reduces by a constant value, defined by Cone Outer Angle. Audio will not reduce within the Cone Inner Angle
Cone Outer Gain	Number The factor by which volume gets reduced outside of the Cone Outer Angle. 0 means nothing can be heard outside of the cone while 1 means there is no reduction
Distance Model	Distance Models The method in which volume decreases as a user gets farther from the audio source. Options are linear, inverse, and eponential
Loop	Checkbox Whether the audio should play on repeat or not
Max Rolloff Distance	Number The maximum distance from the audio source in which the volume gets reduced by distance. A user farther than this distance will not experience any volume reduction
Min Rolloff Distance	Number The distance in which volume reduction starts taking place using the Distance Model and Rolloff Factor. A user closer than this distance will not experience any volume reduction
Rolloff Factor	Number How quickly the volume is reduced as the user moves farther away from the audio source. Typical range for linear distance is 0-1 and 0-∞ for the other distance models
Volume	Number How loud the audio source is
Position	Numbers Location of the asset along the x, y, and z axes
Rotation	Numbers Orientation of the asset represented as Euler Angles
Scale	Numbers How much the asset is stretched along the x, y , and z axes

Components

Components are essentially labels that can be attached to other instances to let Systems know to alter their behavior. For example, attaching a Grabbable Component to an asset will notify the Grabbable System to add functionality to the asset so that users may pick it up and down in the live site

There are no built in components in Digital Bacon, but you can find them available online. In the coming months we hope to provide a platform for users to be able to find and use additional assets easily

Systems

Systems can alter the behavior of Assets with components that pertain to that System. Going off the previous example, if you were to omit the Grabbable System then users would not be able to pick up objects in your live website

There are no built in systems in Digital Bacon, but you can find them available online. In the coming months we hope to provide a platform for users to be able to find and use additional assets easily

Other Assets

Digital Bacon allows other custom assets to be included in the project that don't fit in the other categories. These are plugins that can be included just like Components and Systems that can be found online. In the coming months we hope to provide a platform for users to be able to find and use additional assets easily