Getting started with Verold and Three.js

Getting Started with Verold Studio and Three.js10 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 publishedto 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

The Verold Studio Editor

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)

SceneGraph

CollaborationFeatures

Active Scene

Publishing Workflow

Create NewProject

Setup Assets & Scenes

(Visual Editor)

DefineBehaviours(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).

Publishor 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 immediatelyobjectLoaded() Invoked when target’s hierarchy is loadedupdate() Invoked every frameshutdown() 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 IDvar asset = this.getScene().getObjectById(objectID);

// Clone the objectthis.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 IDvar asset = this.getAssetRegistry().getAssetById(assetID);

// Instantiate the asset - Same as cloning an assetthis.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 itnewAsset.load();

}});

Working with animations// Starting an animationthis.getEntity().playAnimation(loop, startTime, null, callback);

// Stopping an animationthis.getEntity().stopAnimation();

// Scrub to a specific time in secondsthis.getEntity().setAnimationTime(time);

// Set an animation takethis.getEntity().setAnimationTake(strAnimation);

Keyboard input

// Setup the event listenerthis.getEngine().on(‘keyDown’, this.onKeyDown, this);/*remember to turn off the listener in shutdown()*/

// CallbackComponent.prototype.onKeyDown = function(event){ var in = this.getInput(); if(event.keyCode === input.keyCodes.rightArrow){ console.log(“Right Arrow Down!”) }}

Mouse input

// Move eventthis.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 eventthis.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 eventthis.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)

Custom Shader

Coming Soon...

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);

Floppy Dragon

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 animationBurn: makes the dragon burn bright red for a short timeCollisionChecker: collision detection using RaycastingFlappyController: listens to keyboard controls, gives velocityGameManager: Notifies UI, Notifies Game Velocity and state, resets FloppyInputHandler: Listens for input events and notifies systemLoadProgress: Listens to Total Progress, Hierarchy and Dependencies statesRunnerReset: resets the positions of the items as the camera scrolls by themScrollingObject: Moves the node that the camera and player are attached toSpawner: 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 McKegneyCEO, [email protected]@rossmckegney

Publish Interactive 3D to the Web