Tutorial to learn how to create and publish Scenes

In this article, we will introduce how to create and manage Scenes, basic operation methods of STYLY Studio, and the procedure to publish the created Scenes.
By reading this article, anyone can easily learn how to create a VR / AR space and publish their own VR / AR space to the whole world.
Let’s create your own VR / AR space, publish it to the world, and share it using SNS.

STYLY Studio top screen

How to create and manage new scenes

MY SCENES screen CREATE button at the top right of the screen


Scene creation screen Enter the title at the bottom of the screen

Introducing how to create and manage new Scenes. Scene means VR / AR space.
On the MY SCENES screen, you can create, rename, copy, and delete Scenes.
When you start STYLY Studio from the STYLY top page or STYLY GALLERY, the MY SCENES screen opens first.
If you are starting STYLY Studio for the first time, you need to create a new Scene.

Now let’s create a Scene. Click the [Create] button at the top right of the MY SCENES screen.
Next, select VR Scene Template or AR Scene Template, enter the Scene name (Scene name can be changed) in the Title form, and click the [Create] button.
Then, STYLY Studio will start.

About the scene manager in STYLY Studio

Scene manager screen detailed explanation


Scene manager screen scene creation

You can also manage scenes and create new ones within STYLY Studio.
You can start the scene manager by selecting the Scenes tab from the menu tab described later.

Scene manager screen menu description

Menu tab There is a Scenes tab / Create Scene tab. If you select the Scene tab, you can check public / private, check / edit the scene name, and delete / copy the scene. You can create a new Scene by selecting the Create Scene tab.
thumbnail You can check the thumbnail image of the Scene.
Public / Private You can check the public status of public / private scenes. If it is Draft, it means that it is private, and if it is Public, it means that it is public.
Scene name You can check the Scene name.
Edit button You can show / hide the Scene name change button, copy button, and delete button.
Scene name change button You can change the Scene name.
Copy button You can copy the scene.
Delete button You can delete the scene. Please note that once deleted, it cannot be restored.
Close button Return to STYLY Studio. It cannot be used if no Scene has been created.
back button Go to the STYLY Studio home screen.

How to use STYLY Studio

Introducing how to use STYLY Studio.
Explains how to change the work viewpoint, explain the STYLY Studio screen, insert assets, and operate assets.

Zoom / move / rotate the work viewpoint

Introducing how to change the work viewpoint on the STYLY Studio screen.

Zoom in / out of the work viewpoint

Zoom in / out

You can zoom in and out on the work viewpoint by operating the mouse (trackpad).

Operation method Windows / Mac common

Device used Method of operation
mouse Mouse wheel
Trackpad pinch
Two-finger vertical swipe
(Depending on trackpad settings)

Translation of work viewpoint

Move

The work viewpoint can be translated up, down, left and right.

Operation method Windows / Mac common

Device used Method of operation
Common to mouse / trackpad

Right click + WASDQE
W: front, A: left, S: back, D: right, Q: bottom, E: top
* Press the Shift key at the same time to increase the speed of moving the viewpoint.

Arrow key
↑: Top, ↓: Bottom, ←: Left, →: Right
* Press the Shift key at the same time to increase the speed of moving the viewpoint.

Mouse only Wheel button
Center click + mouse move

Revolution of work viewpoint

Orbit

The work viewpoint can be revolved by operating the mouse (trackpad). Revolve around Your Position.

Operation method Common to Windows / Mac

Device used Method of operation
mouse Left click + move mouse
Trackpad Left click + drag

Rotation of work viewpoint

Rotate

You can rotate the work viewpoint by operating the mouse (trackpad).

Operation method Window / Mac common

Device used Method of operation
mouse Right click + move mouse
Trackpad Right click + drag

What is Your Position?

STYLY Studio画面 Your Position

Your Position is the position that will be your first point of view when you experience the VR / AR space.
It will be a viewpoint that you can see by wearing the HMD with STYLY VR APP.
Also, Your Position can be moved.

STYLY Studio screen description

STYLY Studio screen menu explanation

Introducing the screen list of STYLY Studio.
There are four main menus.
Let’s take a closer look at the four menus.

Top button

STYLY Studio screen top button

Menu description

Scenes button Open the scene manager screen.
Assets button Opens a screen for selecting the assets to insert in the Scene.
Assets include 3D models, images, music, videos and more.
Help button You can display information such as shortcut keys that are useful when editing Scenes.
Play Mode button Start Play Mode.
Publish button Open the Publish screen for publishing the Scene.

Hierarchy menu

STYLY Studio screen hierarchy menu

Hierarchy menu is a menu that manages lights called assets, Skybox (celestial sphere), 3D models, etc.
In the newly created Scene, the following 5 assets are inserted by default.
Describes the assets that are inserted by default.

Directional Light is a light source that illuminates the entire space like the sun.

[Ground] Default is the floor / ground.

[Skybox] Default is a celestial sphere that covers the entire screen.

Your Position is the position that will be your first point of view when you experience the VR / AR space.
It will be a viewpoint that you can see by wearing the HMD with STYLY VR APP.
Also, Your Position can be moved.

Transparent Floor is necessary for warp movement in VR.

Menu description

Top bar You can show / hide the hierarchy menu.
Image icon You can show / hide assets on the Scene.
Copy button You can copy assets.
Delete button You can delete assets.

Feature Description

Focus your work perspective on assets Double-click an asset in the Hierarchy menu to focus your work perspective on the asset on the Scene.
Copy to Scene by dragging and dropping You can copy by dragging and dropping the asset from the Hierarchy menu to the Scene.

Scene gizmo

STYLY Studio screen scene gizmo

The scene gizmo shows the direction the camera is currently heading.
You can also quickly switch the camera’s viewpoint to an angle with those directions as the front by clicking the red, green, and blue cones.

Persp / Iso

“Persp” is displayed below the scene gizmo, which means that the scene is displayed in perspective.
Click “Persp” to switch to “Iso” and display the scene in parallel projection.
If you want to restore it, you can switch to “Persp” by clicking “Iso”.

In perspective projection, objects of the same size that are far from the viewpoint are drawn small, and objects that are close to the viewpoint are drawn large.
On the other hand, in parallel projection, objects of the same size are drawn in the same size regardless of the distance from the viewpoint.

Side button

STYLY Studio screen side button

Menu description

global button
* Displayed only when an asset is selected in the hierarchy menu

The global button changes the reference axis for rotating and scaling the selected asset.
When it is On, the rotation and enlargement / reduction operations are performed based on the direction of the entire scene.
When Off, rotation and enlargement / reduction operations are performed around the direction in which the selected asset is heading.

move / rotate / scale button
* Displayed only when an asset is selected in the hierarchy menu
You can switch asset operations (move, rotate, scale).
reset position button Return the camera viewpoint to Your Position.

Insert asset

Insert assets into the Scene and create your own original Scene.
This chapter introduces asset types and explains how to work with assets.
Now, I would like to create a scene by following a simple procedure.

Asset type

Asset list screen

Click the Assets button on the top button to display the asset list.
The asset list includes Environment, 3D Model, Image, Music, Video, Lab and Curated.

Menu description

Environment You can choose Skybox (celestial sphere), Floor (ground), light source and filter.
3D Model You can select a 3D object. These include 3D objects from Google Poly, particles, and 3D models you upload yourself.
Image You can insert an image. There are multiple types of screens for pasting images. You can also add movement to the image. Supports 360-degree images, PNG, JPEG, and GIF.
Music You can insert music. Compatible with MP3 and SoundCloud.
Video You can insert a video. Compatible with YOUTUBE.
Lab Lab assets can be used by arranging them to your favorite assets by freely setting the parameters of properties (color and range).
Curated Curated allows you to insert special assets that can be used for a limited time during events where STYLY Studio is used. If you use this asset to create your work, be sure to check the rules for using that asset at the event before using it.

Insert asset

I will show you how to insert an asset.
Select an asset from the asset list and insert it into the scene.
This time, let’s insert Skybox, Ground, and 3D object assets into the Scene to create a simple Scene.

Change the Skybox

STYLY Studio screen Click the Assets button

Introducing how to change the Skybox.
Click the Assets button.

Asset list screen Click Enviroment

Click Environment.

Asset list screen Click Skybox

Click Skybox.
Skybox allows you to insert celestial sphere assets into your Scene.

Asset list screen Click [Skybox]

Select your favorite [Skybox] and click it.

STYLY Studio screen after changing Skybox

Skybox has switched.
Since one Skybox is applied to one Scene, it has been replaced with the Skybox set by default.
The world view changes greatly just by changing the Skybox, so please try various Skyboxes.

Change the Ground

STYLY Studio screen [Ground] Delete Defalut Ground

Next, let’s insert a Ground in the Scene.
Deletes the ground that is inserted by default.
Delete [Ground] Defalut Ground in the hierarchy menu (click the trash can button).

STYLY Studio screen Click the Assets button

Click the Assets button.

Asset list screen Click Environment

Click Environment.

Click the asset list screen Floor

Click Floor.

Asset list screen Click [Grounds]

If you scroll down, you will see an asset called [Ground].
Select your favorite [Ground] and click.

STYLY Studio screen After inserting Ground

Ground has been inserted.
I was able to create the sky and the ground.
Let’s insert a 3D object here.

Insert a 3D object into a Scene

STYLY Studio screen Click the Assets button

Let’s insert a 3D object into the Scene.
This time, we will insert a 3D object from Google Poly.
First, click the Assets button.

Asset list screen Click the 3D Model button

Click 3D Model.

Asset list screen Click the Poly button

Poly can search for 3D objects in Google Poly and insert them into Scene.
You can also narrow down the categories with the category button.
In addition, you can search by entering the name or URL in the search form, and the Poly search result screen will be updated.

Asset list screen Enter a search word in the search form and click the Search button

Find your favorite 3D object and insert it into your Scene.
This time, enter “animal” in the search form and try searching.
The animal 3D object will then appear on the search results page.
Click Lion.

STYLY Studio screen After inserting 3D object

The selected asset has been inserted into the Scene.
However, Lion’s assets are embedded in the ground, so let’s operate the assets, move and rotate them to your favorite position, and change them to your favorite size.
Next, I will introduce how to operate assets (move, rotate, scale).

How to operate assets (move / rotate / enlarge / reduce)

STYLY Studio screen 3D object operation method

Introducing how to operate assets (move / rotate / enlarge / reduce) using Lion assets.
Select the asset you want to work with.
The selected asset will turn yellow.
To select an asset, click Asset in the Hierarchy menu or click Asset on Scene.

STYLY Studio screen manipulator

When you select an asset, the asset will display a manipulator.
A manipulator is an arrow in three directions: red, green, and blue.

STYLY Studio screen Switching operation method

You can switch between move, rotate, and scale from the move / rotate / scale button on the side menu.
Alternatively, you can switch using the shortcut keys below.

  • [W] key: Move
  • [E] key: Rotate
  • [R] key: Enlargement / reduction

Move

Move STYLY Studio screen

You can move assets by switching to move mode and dragging the manipulator.
You can also move one unit at a time by holding down Ctrl while moving, or you can use Ctrl + Z to return an asset to its previous state.

Move assets one unit at a time by holding down Ctrl while moving


Undo moving assets with Ctrl + Z

rotation

STYLY Studio screen rotation

You can rotate the asset by switching to rotation mode and dragging the manipulator.

Scale

STYLY Studio screen scaling

You can zoom in and out by switching to zoom mode and dragging the manipulator.

How to operate by directly entering numerical values

STYLY Studio screen manipulator numerical input

You can edit the number directly by clicking on the number part of the manipulator.
After entering the numerical value, click the [Enter] key to complete.
It supports all move / rotate / enlarge / reduce modes.
If you want to return the operation, click the [Ctrl] key + [Z] key to return the operation.

List of useful shortcut keys

In addition to the above operation methods, the following is a list of useful shortcut keys that can be used in STYLY Studio.

Asset manipulation
  • [W] key: Switch the operation method of the asset to the move mode (when the asset is selected)
  • [E] key: Switch the asset operation method to rotation mode (when the asset is selected)
  • [R] key: Switch the operation method of the asset to the enlargement / reduction mode (when the asset is selected)
  • [Ctrl] key + move operation: Move in 1 unit (when asset is selected)
  • [Ctrl] key + rotation operation: Rotate in 15 degree increments (when asset is selected)
  • [Ctrl] key + scaling operation: scaling in 1 unit (when asset is selected)
  • [Ctrl] key + [Z] key: Return to the previous operation
Viewpoint operation
  • [F] key: Focus on the target asset (when the asset is selected)
Hierarchy menu operation
  • [Shift] key + [D] key: Copy asset (when asset is selected)
  • [Del] key: Delete asset (when asset is selected)
  • Asset selection + double click: Focus on the target asset

How to publish / share the created Scene

How to publish a scene

STYLY Studio screen Click the Publish button

I will show you how to publish the created Scene.
Click the Publish button to go to the Publish screen.
As a thumbnail image when publishing a scene, the work viewpoint when the Publish button is pressed is the thumbnail image.

Publish screen

Enter the title name (Title) and description (Description), set the tags, and click the Publish button.
Only English (half-width alphanumeric characters) can be entered in the input form.

Publish screen After clicking the Publish button

Click Open in Gallery.
The Scene you created will be published on the STYLY GALLERY site.

STYLY GALLERY site MyScene page

The scene I made has been published on the gallery site.
Now, various people can see the scene.
Next, I’ll show you how to share Scene.

How to share a scene

How to share on SNS

STYLY GALLERY site sharing method

I will show you how to share a scene on SNS.
If you want to share on Twitter, click the Twitter icon to tweet.
If you want to share on Facebook, click the Facebook icon to post.

Create a STYLY marker

Open the published Scene with STYLY GALLERY.
(The URL will be displayed when you publish, so you can click on it or search for the Scene you published from My Page of STYLY GALLERY.)

Mobile icon

You can display the STYLY marker by clicking the Mobile icon.
You can experience the scene by loading the displayed STYLY marker with STYLY Mobile.

STYLY Mobile App Marker

You can download the STYLY marker (PNG image data) by pressing the download button on the upper right of the pop-up.
You can also issue a URL that can directly launch STYLY Mobile by pressing the share button on the upper right.

How to experience Scene

There are three ways to experience Scene.

  • VR (only for those who have an HMD)
  • Web Player
  • STYLY Mobile

Experience Scene in VR with HMD

VR icon

If you have an HMD, you can experience the scene in VR within the HMD by clicking the VR icon.
There are two VR icons.
If you have not downloaded the STYLY VR APP, you will need to download it separately.
How to download and use STYLY VR APP is described here.

Experience Scene on the web

Web Player icon

If you would like to experience Scene in your web browser, click the Web Player icon.
There are two Web Player icons as well as VR icons.

Web Player mode

Click the Web Player icon to switch thumbnail images so that you can look inside the scene in the same way as STYLY Studio.

How to operate Web Player mode

Click the usage and setting button

Web Player mode can be operated with the mouse, but it can also be operated with the keys on the keyboard.
Click “usage and setting”.

usage and setting

  1. 「Speed」:Set the speed of movement.
  2. 「Fix Height」:If checked, the height of the viewpoint will be fixed.
  3. Key button:You can move or zoom in / out by pressing the key that is set with the direction.

Experience Scene on STYLY Mobile

STYLY Mobile

If you have a mobile device (iOS / Android) that can use STYLY Mobile, you can download it from the following URL.

iOS
https://apps.apple.com/jp/app/styly/id1477168256

Android
https://play.google.com/store/apps/details?id=com.psychicvrlab.stylymr&hl=ja

By downloading STYLY Mobile, you can experience VR / AR Scene on STYLY GALLERY on your mobile device.

Experience Scene from Gallery

STYLY Mobile Gallery screen

STYLY Mobile allows you to search for Scene within the app.

STYLY Mobile Scene detail screen

You can also experience the scene by tapping the play button at the top of the details screen of the scene you want to experience.

Load STYLY markers and experience Scene

You can use the function to scan the STYLY marker by tapping CAMERA at the bottom of the STYLY Mobile home screen.

STYLY Mobile STYLY marker scan screen

Start STYLY Mobile.
Load the STYLY marker and press the start button to display the plane detection screen.

STYLY Mobile Scene Plane detection screen

If you tap the screen at any place, the scene will be placed.
① It is a frame for horizontal detection. Scene is displayed around the place where this frame is placed.
② The center point in the frame will be the origin (0,0,0) on STYLY Studio.

How to move in VR Scene

Moving within a VR scene is a combination of turning and moving forward.
There are two ways to change direction.
One is to swipe the screen.
The other is to move the smartphone itself.

方向転換

Change direction

You can move in the current direction by pressing the arrow buttons on the screen.

前進

Advance

You can move to the desired location by moving the smartphone and changing the direction while moving forward with the arrow buttons.
* You can move only when the scene is VR, and it is automatically determined whether each scene is VR or AR.