for SPX

Version 1.0

3D Layer for SPX

screen_shot_001
screen_shot_002

Features

3D Layer for SPX is a ThreeJS implementation for SPX Templates. The version 1.0 supports there features:

  • .glb file format with multiple Objects and Animations.
  • Armatured/Rigged Characters and Animations.
  • HDR Environment map.
  • Transparent Background (works with HDR also).
  • Custom Scene Parameters:
    • Pause Points
  • Custom Object Parameters
    • Auto Rotate Objects
  • PBR Materials.

Before start using the 3D Layer Template, user should know how to use SPX GC and templates in general.
Start here: https://www.spx.graphics/getting-started-with-spx-gc

Installation

3d_image_004

Installing 3D Layer template, the process is the same as all SPX Templates and it should be placed in the SPX-GC’s ASSETS folder. It is recommended to use the following hierarchy:

ASSETS
┕━⏷ templates
     ┝━⏵ Developer-1
     ┝━⏵ Developer-2
     ┕━⏷ Developer-3
          ┝━⏵ PackName-1
          ┕━⏷ PackName-2
               ┝━⏵ css
               ┝━⏵ js
               ┝━⏵ img
               ┝━⏵ models
               ┝━⏵ hdr
               ┝━ Template1.html
               ┕━ Template2.html

Using the above principle, unzip the template package to /ASSETS/templates/meniac/3DLayer

Usage

3d_image_002

Add template to a project

  • Go into SPX-GC application
  • Open (or create) a project
  • Go to Project Settings
  • Browse available templates with [+] button
  • Pick a template and click SELECT
  • In project settings you can change some settings, such as server and layer to be used for playout, accent color etc. Typically these settings does not need to be changed.

SPX 3D Layer Template

template_screenshot

When template is played, it will start to play all animations that the glTF file contains, in full screen mode.

ParameterDesc
Gfc operator noteCan be used to give text hint for graphics operator. Helps to find template on Rundown.
Loop Style

Four Different Looping options:

  • Once (Stop) – Plays the animation once. Rewinds the animations when comes to the end.
  • Once (Pause) – Plays the animation once. Pauses the animation when the animation ends.
  • Loop – Loops the Animation forever.
  • Ping-Pong – Loops the Animation back and forth.
glTF -fileList of glTF files that are located in the /models/ folder.
HDRI SelectorList of HDR files that are located in the /hdr/ folder.
Shadow PlaneCreates a transparent plane in world origin that receives only shadows. Very helpful for example, if it is needed to catch shadows from objects in virtual environment.
Time DisplayDisplay time in seconds in right top corner. Mostly used for Debug and Development use.

Blender

3d_image_002

3D Layer for SPX is designed to use Blender as 3D tool of Choise and has been tested with LTS version 3.3.14. The glTF file export probably works with other 3D Softwares also, but this HAVE NOT BEEN TESTED and we cannot quarantee that all features work.

Before Exporting 3D scene as .glb file, the ‘File / External Data / Automatically Pack Resources’ Should be turned on.

When the models and animations are ready to be Exported, select ‘File / Export / glTF 2.0 (.glb/gltf)’ from Blenders menu.

external_data
Export_glb

Here is good settings for basic export:

 

SettingDesc
.glbThe template uses glTF binary format. So make sure to select it.
Remember Export SettingsThis saves the setting in blender file, so next time you don’t have to set them again.
Include

Data to include:

  • Custom Properties – This saves the Custom data values to the exported glTF file. Should be checked if Custom Parameters are exported.
  • Camera – Exports all Cameras that are found in the Scene.
  • Punctual Lights – Export directional, point and spot Lights.
Light Mode

Three option available:

  • Standard (Default)
  • Unitless
  • Raw (Deprecated)

Unitless should be always used to since ThreeJS uses different Units that Blender.

AnimationsBake all animations should always be on. Leave no animations behind!
Export_Settings

Custom Properties

Custom Properties will be shows on glTF loading as "userData" and is in JSON format.

The Custom Property name should always be: SPX3D

CP_pause_point

For Scene

ParameterValue
PausePoint

Seconds is comma separated integers as string.

{ “PausePoint” : “2, 4, 6” }

This Example sets 3 different pause points at times: 2, 4 and 6 seconds.

 

scene_custom_properties

For Objects

ParameterValue
AutoRotateXRotates Object automatically on X-axis. Given value is Degrees per Frame Draw.
{ “AutoRotateX” : “2” }
AutoRotateYRotates Object automatically on Y-axis. Given value is Degrees per Frame Draw.
{ “AutoRotateY” : “2” }
AutoRotateZRotates Object automatically on Z-axis. Given value is Degrees per Frame Draw.
{ “AutoRotateZ” : “2” }

Properties can be combined in one property:

{ “AutoRotateX” : “5”, “AutoRotateY” : “10” }

This example automatically rotates object 5 degrees on X-axis and 10 degrees on Y-axis.

Custom Property Editor

Known Issues

3d_image_001
  • The Animation length is taken from the OBJECTS animation timeline and keyframes. It has nothing to do with 3D softwares timeline length! For example, if Blenders timeline is set to be 10 seconds and the last keyframe is at time 8 seconds, the exported scene in template will be 8 seconds long. You need to add “empty” keyframe at time 10 seconds, to make it 10 seconds long.
  • Just a reminder that, the first Camera that is found in glTF will be used. It’s good practice to only one camera in the file.

Good to know

©2024 – MENiAC Oy