Getting started with Verold and Three.js

Getting Started with Verold Studio and Three.js
10 March 2014

Your browser can deliver native performance. So
why are you still building native apps?
Verold Studio: Publish Interactive 3D to the Web

App Designer
CG Artist
App published
to the Web, Mobile,
Console, SmartTV
With Verold’s visual online tools, your creative teams build
and immediately publish interactive content
Verold Publishing Solution

● Verold brings the power of a game engine to web design,
unlocking the latest features of modern browsers
● Verold is online and collaborative - powering an ecosystem
of creators
● Verold integrates seamlessly with web publishing pipelines
● Verold allows you to scale effortlessly
Revolutionizing Web Publishing

Model Viewer:
● No coding required
● Single scene, built-in components
● Auto-publish
Apps:
● Fully customizable using HTML/CSS/Javascript editor
● Advanced components from Verold and the community
● Publish to Verold or download project and host yourself
Project Types

Editor Layout
Inspector
Your Assets (upload or source from Asset Library)
Scene
Graph
Collaboration
Features
Active Scene

Publishing Workflow
Create New
Project
Setup Assets
& Scenes
(Visual Editor)
Define
Behaviours
(Three.js)
Preview
EMBED Projects: Published projects can be marked PUBLIC to be playable in the Explore section of
Verold Studio, and embedded elsewhere on the web using the iFrame embed viewer.
API Access: You can add WHITELISTED DOMAINS to your published projects, allowing them to be
loaded in whole or in part onto your own website. This is, for example, how we display 3D content on
the Verold homepage.
Downloaded Projects: You can download all assets from your projects as a self-contained web
application. Host this on your own website, or package it up as a mobile app (e.g. using Cordova).
Publish
or Download
As many iterations as you like, solo or with collaborators

You create components as Javascript objects, and attach
them anywhere in the scene graph. The Components API:
init() Invoked immediately
objectLoaded() Invoked when target’s hierarchy is loaded
update() Invoked every frame
shutdown() Invoked when the component is
unloaded
For example, if you attach a component to a character in
your scene, you could move the character by typing:
this.getThreeData().position.x += 0.1;
Component-Entity Model

Components expose Attributes, allowing for easy reuse and
streamlined collaboration between developers and the rest
of the creative team.
Attributes can be:
Primitives (string, int, float, array, etc)
Assets
Objects (e.g. Cameras, model instances, prefabs, etc)
When a component is attached to an object in the scene
graph, the attributes are made available in a nice UI.
Attributes

Components can also import third party libraries. Verold
provides several out of the box:
● Oculus VR
● Leap Motion
● NeuroSky
● Box2D
● Ammo
● …
Or add your own. Simply reference the third-party script URL
from your component.
Third Party Libraries

Verold supports all the major transfer formats:
● FBX, Collada, OBJ, PLY, STL
If your model has textures, bundle them in a ZIP file with the
model, and upload all together.
For best performance, keep polycount and number of
meshes/textures low. Models with millions of polys will run,
but not well.
Importing 3D Models

We support:
● Diffuse (Transparency in the Alpha channel)
● Normal
● Specular (Gloss in the Alpha channel)
● Ambient Occlusion
● Others?
When you upload a texture, we generate a DDS
compressed texture for you. If you need larger than 2K
textures, or your app uses a lot of texture data, consider
enabling hardware compression on your texture settings.
Textures

You can upload skeletal animations as part of your FBX file.
Vertex animations are not currently supported.
The editor allows you to break your animation into clips.
These can then be triggered through code.
Animations

Everything in Verold Studio is multi-user and real-time
You can invite collaborators by email. All collaborators have
read and write access to the project.
Collaborators can also leave comments and take
screenshots in the project.
Collaboration Features

By default, your project is yours and can only be edited by
you. You can choose to make your project “Forkable”, which
lets others use your project as a Template. When you make
your project Forkable, you should choose an appropriate
license:
● No rights reserved: Forkers can do what they like
● Attribution: Forkers need to credit you when they use it
● Attribution non-Commercial: Your project can only be
used for non-commercial purposes
Forking Projects

You can organize your assets in folders in the Asset
Browser.
You can then upload your folders as Packages to the Asset
Library. Packages can be made Private so that only you can
use them, or can be shared with the community. As with
templates, shared packages should have an appropriate
license.
Asset Library

Scripting Verold with Three.js

Cloning an object
// Lookup an object by ID
var asset = this.getScene().getObjectById(objectID);
// Clone the object
this.getScene().createInstance(asset,
{success:function(newAsset){
//add it to the scene
scene.addChildObject(newAsset);
//set the position
newAsset.threeData.position.set(10, 0, 0);
}}
);

Instantiating an asset
// Lookup an asset by ID
var asset = this.getAssetRegistry().getAssetById(assetID);
// Instantiate the asset - Same as cloning an asset
this.getScene().createInstance(asset,
{success:function(newAsset){
//add it to the scene
scene.addChildObject(newAsset);
//set the position
newAsset.threeData.position.set(10, 0, 0);
//make sure to load it
newAsset.load();
}}
);

Working with animations
// Starting an animation
this.getEntity().playAnimation(loop, startTime, null,
callback);
// Stopping an animation
this.getEntity().stopAnimation();
// Scrub to a specific time in seconds
this.getEntity().setAnimationTime(time);
// Set an animation take
this.getEntity().setAnimationTake(strAnimation);

Keyboard input
// Setup the event listener
this.getEngine().on(‘keyDown’, this.onKeyDown, this);
/*remember to turn off the listener in shutdown()*/
// Callback
Component.prototype.onKeyDown = function(event){
var in = this.getInput();
if(event.keyCode === input.keyCodes.rightArrow){
console.log(“Right Arrow Down!”)
}
}

Mouse input
// Move event
this.getEngine().on(‘mouseMove’, this.onMove, this);
Component.prototype.mouseMove = function(evt){
var x = evt.sceneX;
var y = evt.sceneY;
//do something with it
//if you want to use it’s position on the canvas, use
the
//width and height of this.getRenderer().
renderController
}
//Click event
this.getEngine().on(‘mouseDown’, this.onDown, this);
//get coords the same way

WebAudioPlayer Component
// create a web audio component for each sound file
// extend the web audio component with a listener event
this.getEvents().on(‘play_audio:’ + strID, this.play,
this);
this.getEvents().on(‘stop_audio:’ + strID, this.stop,
this);
// note: max of 4 audio nodes at a time (browser dependent)

Particle effects
With particle effects, you need to create a ThreeJS
ParticleSystem, Geometry, and ParticleBasicMaterial, and
then, once it’s ready to use, add it to either the object that
the script belongs to using this.getThreeData().add(system);
or add it to the scene using
this.getScene().threeData.add(system);

Visit the Floppy Dragon Template Project
Fork the Sample Project

Loading Screen
Using the LoadingProgress Component, which listens to the
states of the Scene data:
-hide the verold3d Canvas
-listen for Hierachy and Dependencies to be loaded
-on load of both, display the verold3d Canvas, and show the
StartUI

Collision Detection
-Player object has a low resolution sphere mesh attached to
it
-Collidable objects have a cube mesh attached to them
-Player Sphere Mesh is used to cast a ray from it’s origin to
each of its vertices
-[Low Resolution] If the distance between player and a
collidable is met do [Hi Res]
-[High Resolution]If the face of any of the Collidable objects
is intersected by the ray, it returns a collision event!
-This is a common but low performance version of collision
detection

Camera & Controls
-Camera and player are nested in a Scrolling object
-The camera and player scroll together
-On either a mouse down event of the engine OR a mouse
down event of a div, of full window size, underneath the
game window, give the player a positive velocity

Assets
-BitGem3D Art Assets: All low poly yet visually appealing
-Cut each animation into clips using the Inspector Window
-All the timings were laid out in the Bitgem site, so cutting
clips by hand was simple
-Attach the animation asset to the model, and set the model
to use the Idle animation and Loop

Environment
-More BitGem3D!
-Create Empty Objects, put models in them!
-Align them all so that they go from origin Left, so that origin
can be used for bounds checking and removal/readdition in
scrolling
-[Performance] Remove all shadows, enable per-vertex
lighting, reference as few materials as possible

Floppy Dragon Components
Floppy Dragon uses the following components:
AnimationTrigger: set the idle animation to loop OR play the death animation
Burn: makes the dragon burn bright red for a short time
CollisionChecker: collision detection using Raycasting
FlappyController: listens to keyboard controls, gives velocity
GameManager: Notifies UI, Notifies Game Velocity and state, resets Floppy
InputHandler: Listens for input events and notifies system
LoadProgress: Listens to Total Progress, Hierarchy and Dependencies states
RunnerReset: resets the positions of the items as the camera scrolls by them
ScrollingObject: Moves the node that the camera and player are attached to
Spawner: initial addition/pooling of collision objects, notifies CollisionChecker of
the collision meshes that belong to the collidables, moves the objects

Remix away!
Some things to try:
● Play with material settings on the assets and
environment
● Experiment with game mechanics, speed up rate of
falling, jumping, etc
● Swap out assets for your own (Rob Ford flappy anyone?)
● Add rewards
● …
● GO NUTS!

Verold for the Internet of Things

The power of web sockets!
Web Sockets provide the bridge between your device and
your web application.

Ross McKegney
CEO, Verold
ross.mckegney@verold.com
@rossmckegney
Publish Interactive 3D to the Web

Getting started with Verold and Three.js

More Related Content

What's hot

Similar to Getting started with Verold and Three.js

Recently uploaded

Getting started with Verold and Three.js