virtual reality coding using playcanvas...2018/10/20 · java script: spinmove.js an application...

2018-2019 Saturday Academy Program

Last Update: Octiber 20, 20182018-2019 SATURDAY ACADEMY PROGRAM 1

Virtual Reality Coding

Using PlayCanvasProject-based Learning

Donald McCoyK-to-College STEM Education Consultant

[email protected]@gmail.com

Please be seated, class will start shortly…

2018-2019 Saturday Academy ProgramN

OV

EM

BE

R 1

0, 2

018:

CL

AS

S O

BJE

CT

IVE

S F

OR

TO

DA

Y


Welcome, Roll Call, MSEN News and Announcements For Today

Class Code of Conduct using VR: Oculus Go Health and Safety Warnings

Launch and Sign-in to Playcanvas App.

Any Questions: Review Homework Assignment (Q&A)

Recap: Playcanvas in a few minutes (Overview)

Testing your knowledge and understanding

Playcanvas Scripts

Playcanvas Homework Assignments (Due: December 1, 2018): https://developer.playcanvas.com/en/tutorials/

https://developer.playcanvas.com/en/tutorials/


RECAP: PLAYCANVAS IN A FEW MINUTES (OVERVIEW)


Creating a VR File…which template do I use? Blank Project (A new blank project.)

Model Viewer Starter Kit (A simple viewer application for any 3D

model. Just drop the 3D model into the scene to upload.)

VR Starter Kit (An application to get you started quickly creating VR

applications in PlayCanvas.)

Common Questions and Show-and Tell:

https://developer.playcanvas.com/en/user-manual/faq/





How do I create an Entity?You can create a new Entity by clicking on the Add button in the Hierarchy

panel or right click on an Entity and use the New Entity menu item.






Common

Questions

and Show-

and Tell:




How do I add a component?

To add a component to an Entity, select the Entity and then

click Add Component in the Inspector or right click on the

Entity and select a component from the Add Component

context menu.







How do I create a shape like a box, sphere etc?You can add primitive shapes like boxes, spheres and others by adding a

Model Component on an Entity and changing its type to the desired shape.

You can also right click on an Entity and select New Entity/Box to add a box

(similarly for other shapes).







How do I change the background color?

To change the background color of your scene. You should

update the Clear Color property of the camera in your scene.

You could also try and adding a skybox to your scene







How do I change the color of a model?You can create a new material and drag and drop it on your model or you

can select its existing materials and edit their properties in the Inspector.

Every surface on a 3D model is rendered using a material. The material defines

the properties of that surface, such as its color, shininess, bumpiness etc.







How do I create a light?You can create a light by adding a Light component to an Entity.

You can also right click on an Entity and select New Entity / Directional Light

to create a new directional light and similarly for spot lights and point lights.







How do I create a material?To create a material click on the Add button in the Assets panel and then

select New Material.

Every surface on a 3D model is rendered using a material. The material

defines the properties of that surface, such as its color, shininess,

bumpiness etc.







How do I create a skybox?To create a skybox for your scene you first need to create a Cubemap

asset. Then you can drag and drop the Cubemap inside the 3D viewport, or

you can go to the Scene Settings and drag the Cubemap in the Skybox

field.







How do I add a script?You can use javascript to control the behavior of entities You can add a

script component and create a new script.







What is a Javascript?Scripts are how you make your PlayCanvas application interactive.

They are written in regular JavaScript the same programming

language that is used to program web pages.







Develop Game(s) or 3D environment(s) suitable

for showcase at the MSEN Awards Day (5/19).

Our Goal:

Our Next Steps:


PLAYCANVAN – FORKING NOTES


Owner

Gravitational Field Demo.

Play: https://playcanv.as/p/rRa3NZ8N/

Jeff Segor https://playcanvas.com/project/573349/overview/gravitational-

field

https://www.minds.com/Paperclick/blog/gravitational-field-in-playcanvas-from-scratch-881598400454447104

Snake Game

Play: https://playcanv.as/p/myFu0r5c/

Alex Palumbo https://playcanvas.com/project/577779/overview/snake

Warehouse Walk

Play: https://playcanv.as/p/c2PYgbZs/

lazuras https://playcanvas.com/project/563466/overview/warehouse-

walk

The Forest

Play: https://playcanv.as/p/CoC9Ydnx/

https://playcanvas.com/project/538134/overview/the-forest

https://playcanv.as/p/rRa3NZ8N/

https://playcanvas.com/project/573349/overview/gravitational-field

https://www.minds.com/Paperclick/blog/gravitational-field-in-playcanvas-from-scratch-881598400454447104

https://playcanv.as/p/myFu0r5c/

https://playcanvas.com/project/577779/overview/snake

https://playcanv.as/p/c2PYgbZs/

https://playcanvas.com/project/563466/overview/warehouse-walk

https://playcanv.as/p/CoC9Ydnx/

https://playcanvas.com/project/538134/overview/the-forest

2018-2019 Saturday Academy ProgramO

CT

OB

ER

27, 2

018:

CL

AS

S O

BJE

CT

IVE

S F

OR

TO

DA

Y


Welcome, Roll Call, MSEN News and Announcements For Today


Launch and Sign-in to Playcanvas App.

Review Homework Assignment (Q&A)

What is Playcanvas game engine?

Getting to know Playcanvas (Part 1):

Lecture and Self-Study (Advanced Experiences and Exploration)

Tutorial Project Activity: 1 (Getting Started: 2:11)

Tutorial Project Activity: 2 (Entities: 1:42)

Tutorial Project Activity: 3 (Materials: 2:12)

Tutorial Project Activity: 4 (Models: 1:07)

Download “your activity projects” to Oculus Go Hands-on (Exploration and Experiences)

Playcanvas Homework Assignments (Due: November 10, 2018): https://developer.playcanvas.com/en/tutorials/


https://youtu.be/3l5uV2RjFXo

https://youtu.be/tXEvAYYIdy0

https://youtu.be/sAh5hMaFoxY

https://youtu.be/-d-89834Uws


Playcanvas Keyword Discussion (Take Note…Write it down!)

20

https://developer.playcanvas.com/en/user-manual/glossary/

Asset

Entity

Framework

Gizmo

Material

Scene

PlayCanvas Editor

PlayCanvas Engine

Project

High Dynamic Range

Last Update: Octiber 20, 20182018-2019 SATURDAY ACADEMY PROGRAM

https://developer.playcanvas.com/en/user-manual/glossary/



Self-paced PlayCanvasTutorials (Homework Assignments) YouTube Video URL

Tutorial 1 - Getting started with PlayCanvas https://youtu.be/fXc-JjH2nNo

Tutorial 2 - Entities and materials https://youtu.be/sk6eUNERs4E

Tutorial 3 - Lighting https://youtu.be/FSi13KQYCDI

Tutorial 4 - Skyboxes in PlayCanvas https://youtu.be/eKjTacH36Qg

Tutorial 5 - Particle systems in PlayCanvas https://youtu.be/ys3wac2vaSE

Tutorial 6 - Overview of scripts in PlayCanvas https://youtu.be/lNG7ndSUk9o

Tutorial 7 - Make a 3D object move with code https://youtu.be/xgJKga1huBE

Tutorial 8 - Moving objects with keyboard input https://youtu.be/VpJxc_iRmeM

Tutorial 9 - Rotating objects with keyboard input https://youtu.be/amHq5qRBWP4

Tutorial 10 - Rigid Bodies and Collision in PlayCanvas https://youtu.be/FbMwqd9MF3c

Tutorial 11 - Adding sound to your game https://youtu.be/xP4V0Grm01s

Tutorial 12 - Controlling audio with scripts https://youtu.be/udwZzDfbSvI

https://youtu.be/fXc-JjH2nNo

https://youtu.be/sk6eUNERs4E

https://youtu.be/FSi13KQYCDI

https://youtu.be/eKjTacH36Qg

https://youtu.be/ys3wac2vaSE

https://youtu.be/lNG7ndSUk9o

https://youtu.be/xgJKga1huBE

https://youtu.be/VpJxc_iRmeM

https://youtu.be/amHq5qRBWP4

https://youtu.be/FbMwqd9MF3c

https://youtu.be/xP4V0Grm01s

https://youtu.be/udwZzDfbSvI


CT

OB

ER

20, 2

018:

CL

AS

S O

BJE

CT

IVE

S F

OR

TO

DA

Y


Welcome, Roll Call, MSEN News and Announcements For Today, Lesson Plan Overview


Setup Playcanvas Account (User ID and Password)

What is VR?

History, Product Developers, Career Opportunities, Applications Usage (now & future)

Basic VR Safety Requirements, Key Word and Commonly Used Vocabulary

Basic VR hardware and principles including display, optics and orientation tracking

Getting to know the Oculus Go Hands-on (Apps Exploration and Experiences)

Oculus Go VR setup, controller, menu navigation, download and install VR Apps

Introduction to Playcanvas (Overview)

Playcanvas Homework Assignments (Due: October 27, 2018): https://developer.playcanvas.com/en/tutorials/

Virtual Reality Coding Using Playcanvas



IBM Technical Roles

• Associate Engineer

• Sr. Associate Engineer

• Staff Engineer

• Advisory Engineer

• Senior Engineer

• B.S. Electrical and Electronics Technology

• Science Projects

• Electronics Projects

• Electronics Repair

• Electronics Modification

• Musical Bands – R&B and Jazz (Bass Guitar)

• Audio Recording

• Light & Sound stage work

K-to-College STEM Education Consultantincluding…Volunteering

IBM Work Locations

• Rochester, MN

• Hursley, England (UK)

• Chicago, IL

• Evansville, IN

• RTP (Raleigh, NC)

IBM Products & Services

• Hard Drive Systems

• PC Monitors

• Failure Analysis

• Competitive Analysis

• Networking Hardware

• FLL World Festival Robotics

Judge (2006 – YTD)

Middle School Age Youth

• FRC Regional Robotics Judge

( 2010 – YTD)

High School Age Youth

IBM Leadership Roles

• People Manager

• Program Manager

• Project Manager

• Quality Manager

http://www.usfirst.org/

• A.A.S. Electrical and Electronics Technology

My STEM Educationand Career Pathway…

What will yours be?


LESSON PLAN: Virtual Reality Coding Using Playcanvas


Age Levels: Intended for ages 13+ (See next page Health and Safety Warnings)

Lesson Focus:

This course covers the foundational Virtual Reality (VR) technology application skills needed to experience, explore, and

produce virtual world content using the Playcanvas game engine as professional developers. Student will also learn about

career opportunities as VR code developers.

Objectives: Introduce students to:

What is VR (history, product developers, applications and usage (now and future)?

Basic VR safety, hardware and principles including display, optics and orientation tracking

Oculus Go VR product setup, controller, menu navigation, download and install VR Apps

Playcanvan (https://playcanvas.com/) game engine and virtual world environment coding

Anticipated Learner Outcomes: Students will be able to:

Explain VR basic hardware, health & safety issues, setup, menu navigation, install VR Apps.

Navigate Playcanvas, design, create, and edit VR projects with 3D entities, scenes, and scripts.

Upload PlaycanvasVR project files into Oculus Go for publishing and public sharing

Present and demonstrate completed virtual world projects based on defined requirements.

https://playcanvas.com/


ABOUT THIS COURSE

25

Designed for MSEN pre-college students who are

interested in Virtual Reality (VR) and want to learn about

the principles of VR technologies and programming. The

course will use the Oculus Go and manyVR tech demos.

Student learned outcomes include, creating and deploying

VR designs and gaming applications. Students “Play + Learn

+ Design” based on variables, rules, and processes in

graphics principles, collaboration, storyboarding, and using

PlayCanvas, an open source 3D game engine/interactive 3D

application engine to designVR gaming experiences. https://playcanvas.comPrerequisites: No programming experience required.

Last Update: August 7, 20182018-19 SATURDAY ACADEMY PROGRAM



Message from Dr. Derek Ham

26

https://youtu.be/F4cOPrpJEHYConference Presentation on Restructuring Design Education

…design studio, its practices,

pedagogies and myths, and present

computational design methods…


https://youtu.be/F4cOPrpJEHY


IMPORTANT ABOUT THIS CLASS


Oculus Go Health and Safety Warnings: https://www.oculus.com/legal/health-and-safety-warnings/

Oculus Go: Product is not a toy and should not be used by children under the age of 13.

Breaks: Take at least a 10 to 15 minute break every 30 minutes.

Seizures: Some people (about 1 in 4000) may have severe dizziness, seizures, eye or muscle twitching or blackouts triggered by

light flashes or patterns…even if they have never had a seizure or blackout before or have no history of seizures or epilepsy.

Contagious Conditions: To avoid transferring contagious conditions use the assigned VR mask insert.

Interference with Medical Devices: If you have a pacemaker or other implanted medical device, do not use the headset and

controller without first consulting your doctor or the manufacturer of your medical device

Flying Objects: Install and use wrist straps or lanyard with controller accessories

Always be aware of your surroundings before beginning use and while using the headset. Use caution to avoid

injury.

https://www.oculus.com/legal/health-and-safety-warnings/


IMPORTANT ABOUT THIS CLASS…


Oculus Go Health and Safety Warnings: https://www.oculus.com/legal/health-and-safety-warnings/

https://www.oculus.com/legal/health-and-safety-warnings/


LESSON PLAN: Virtual Reality Coding Using Playcanvas…


Satu

rday A

cad

em

y S

essio

ns Course Learning Outcomes (2 Hours/session)

Oct. 20

(FI)Oct. 27 Nov. 10 Dec. 1 Dec 8

Safety Issues/Handing Concerns, Keywords, VR Orientation,

Getting to know the Oculus Go (Operations, Apps), Setup

PlayCanvas Account (homework assignment)

Graphics and Design Basics and PlayCanvas (Dashboard,

Navigation, Editor, Scripting, Play, Publish), and tutorial

lessons and activity exercises. (homework assignment)

VR Game application design and roles (storyline, artist,

characters, content, world and interface design). VR Game

design “challenge” requirements. (homework assignment)

Continued from prior week project assignments.

VR Game application design project-based learning.

Final Student VR Game or World Experience Presentations


LESSON PLAN: Virtual Reality Coding Using Playcanvas…


Satu

rday A

cad

em

y S

essio

ns

Course Learning Outcomes (2 Hours/session) Jan. 12 Jan. 26Feb. 2

(FI)Feb. 16 Feb. 23

Three R’s (Refresh, Remember, Reminders)

• Oculus Go and Playcanvas

• Design a VR Project for the MSEN Awards Ceremony (5/4/19):

• Brainstorm and Develop Requirements for VR production

• Assign VR Scene role to each Team. Assign a Creative Director

Deploy Graphics Design & Software Development Process Steps:

• Research, Concept, Design, Prototype, Test, Evaluate & Improve

• Weekly Status and Progress Reviews.

Continue development…Pre-release Viewing to MSEN Leaders

Continue development…Pre-release Viewing to MSEN Leaders

MSEN VR World Experience product released


Physical principles of VR - Orientation Tracking

31http://www.leadingones.com/articles/intro-to-vr-4.html Last Update: August 7, 20182018-19 SATURDAY ACADEMY PROGRAM

http://www.leadingones.com/articles/intro-to-vr-4.html


VR Keyword Discussion (Take Note…Write it down!)

32https://www.techrepublic.com/article/mini-glossary-virtual-reality-terms-you-should-know/

Head mounted display or HMD

Head tracking

Eye tracking

Field of view (FOV)

Latency

Refresh rate

Simulator sickness

Last Update: Octiber 20, 20182018-2019 SATURDAY ACADEMY PROGRAM

Let’s Meet

the Oculus GO

https://www.techrepublic.com/article/mini-glossary-virtual-reality-terms-you-should-know/


Keyword Discussions…

33https://www.techrepublic.com/article/mini-glossary-virtual-reality-terms-you-should-know/

Haptics

Presence

Social VR

Cinematic VR

360 video

Stitching


https://www.techrepublic.com/article/mini-glossary-virtual-reality-terms-you-should-know/


LET’S MEET PLAYCANVAS

Last Update: August 7, 20182018-19 SATURDAY ACADEMY PROGRAM 34

Create your Login and Password

https://playcanvas.com



Playcanvas Keyword Discussions…

A Project is a collection of:

Scenes - An hierarchy of Entities used to build up your game. A Scene could be a single level or your entire game. It depends.

Assets - 3D Models, textures, images, sound files and anything other assets you use in your game.

Scripts -Your source code. You can either write code using the PlayCanvasbuilt-in script editor, or you can sync to your project using code-hosting services like Github or Bitbucket.

Published Apps -Your applications can be exported to archives ready to be deployed, or published directly to PlayCanvas servers.


2018-2019 Saturday Academy ProgramLEARNING PLAYCANVAS


PlayCanvasTutorials URL

Tutorial 1 - Getting started with PlayCanvas https://youtu.be/fXc-JjH2nNo

Tutorial 2 - Entities and materials https://youtu.be/sk6eUNERs4E

Tutorial 3 - Lighting https://youtu.be/FSi13KQYCDI

Tutorial 4 - Skyboxes in PlayCanvas https://youtu.be/eKjTacH36Qg

Tutorial 5 - Particle systems in PlayCanvas https://youtu.be/ys3wac2vaSE

Tutorial 6 - Overview of scripts in PlayCanvas https://youtu.be/lNG7ndSUk9o

Tutorial 7 - Make a 3D object move with code https://youtu.be/xgJKga1huBE

Tutorial 8 - Moving objects with keyboard input https://youtu.be/VpJxc_iRmeM

Tutorial 9 - Rotating objects with keyboard input https://youtu.be/amHq5qRBWP4

Tutorial 10 - Rigid Bodies and Collision in PlayCanvas https://youtu.be/FbMwqd9MF3c

Tutorial 11 - Adding sound to your game https://youtu.be/xP4V0Grm01s

Tutorial 12 - Controlling audio with scripts https://youtu.be/udwZzDfbSvI

https://youtu.be/fXc-JjH2nNo

https://youtu.be/sk6eUNERs4E

https://youtu.be/FSi13KQYCDI

https://youtu.be/eKjTacH36Qg

https://youtu.be/ys3wac2vaSE

https://youtu.be/lNG7ndSUk9o

https://youtu.be/xgJKga1huBE

https://youtu.be/VpJxc_iRmeM

https://youtu.be/amHq5qRBWP4

https://youtu.be/FbMwqd9MF3c

https://youtu.be/xP4V0Grm01s

https://youtu.be/udwZzDfbSvI


CT

OB

ER

20, 2

018:

CL

AS

S O

BJE

CT

IVE

S F

OR

TO

DA

Y


Playcanvas Homework Assignments

(Due: October 27, 2018):


Tutorial 1 - 3

Virtual Reality Coding Using Playcanvas


virtual reality coding using playcanvas...2018/10/20 · java script: spinmove.js an application...

Documents