1998-2004: Criterion software

2004-2007: EA

2007-2009: SonY

2009-2011: Activision

PlayCanvas and Three.js

PROJECT Management

Scene Management

Models: Simple primitives

Models: Assets

Material Editing

Shadows

Limitations

Scene Settings

Perspective Cameras

ORTHOGRAPHIC CAMERAS

Let's Try It!

Workflows

Scripting on playcanvas.com

Scripting via GitHub/BitBucket

Scripting via GitHub/BitBucket

Anatomy of a Script

ENTITY COMMUNICATION

var e = context.root.findByName(entityName);
e.script.send(scriptName, functionName, arg1, arg2 ... argN); 

Debugging Scripts

Debugging Scripts

Take Care in the Script Editor

Rigid BOdy

Body Types

Collision Primitives

Ray Casting

checkGround: function () {
    var start = this.entity.getPosition();
    var end = start.clone();
    end.y -= 1.1;
    this.onGround = false;

    // Fire ray straight down to just below the bottom of rigid body
    // If it hits something, the character is on the ground
    context.systems.rigidbody.raycastFirst(start, end, function (res) {
        this.onGround = true;
    }.bind(this));
}

Contact Detection

        initialize: function () {
            this.entity.collision.on('collisionstart', this.onHit, this);
        },
        
        onHit: function (result) {
            var a = this.entity;
            var b = result.other;
            console.log(a.getName() + ' has touched ' + b.getName());
        }

Let's Try It!

Supported Formats

DEMO: 3D Audio

Sources and Listeners

Controlling Audio from Script

update: function (dt) {
    if (context.keyboard.wasPressed(pc.input.KEY_SPACE) && onGround) {
        this.entity.audiosource.play('jump_sound');
    }
}

update: function (dt) {
    this.timer += dt;
    this.entity.audiosource.volume = Math.sin(this.timer) * 0.5 + 0.5;
}

The Web Wins for Virality

Monetization

HTML5 to Native App

Export and download your PlayCanvas app

Package using HTML5 native wrapper tech