web 3.0 gaming anatomy

presented by Jean-François Grangier

founder of

2016 - webpresentation 3.0 gaming prepared anatomy by - multivers3D,prepared by multivers3D,all rights reserved. all rights reserved. AgendaAgenda

About the speaker Web 3.0 engine

Historical facts (gaming & web) Dynamic functions

The web & the 3D fusion Unified functions

What's a web 3.0 game? Turn issues into assets

Today's WebGL games AAA games with WebGL

The play process before WebGL Web 2.0 functions + 3D

The play process with WebGL Web 3.0 gaming

Facts The web 3.0 gaming future

How does it work? To summarize

The rendering process Thank you

Architecture Q&A

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. AboutAbout thethe speaker :speaker : Jean-FrançoisJean-François GrangierGrangier

18 years of systems R&D 2001-2005 - Remington Ltd. System Architect, IL USA (Mc. Donalds inc, AON 5 years of web 3.0 R&D assurance, Wrigley inc., Edward Don, inventions & theories: autonomous Chicago Joint Commission, Federal green system, electric bike kit, green Home Loan Bank of Chicago, 2click- architecture, USB robots, mathematical Media, Zebra inc.). App. security equations, origin of life theory, consultant packaging models, portable computers 2005-2009 – Founder: 1999 - Bachelor Computer Sciences + myconstructor.com CMS for PMEs (IL Computer Graphic minor (Midwest USA) USA) (1K+ websites) 1999 - 1st Game engine with directX 8.0 2009-2011 – Founder: La Durance Info. + 1st CMS with web 1.0 interface (PACA France) Web 2.0 CMS 1998-2001 - Programmer Analyst at John 2011-today – Founder: multivers3D Deere & Co., IL USA (ecommerce + CMS) (PACA France) web 3.0 CMS + «Ivi & The Light Workers » (web 3.0 game)

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb && thethe videovideo gamegame storystory

The The gaming world

Origins 1960s: ARPANET 1948: 1st programmed game Turochamp (chess game) by Alan Turing and David Dec. 1990: marks the beginning of Champernowne modern internet (connected world + HTTP + HTML + FTP + browser + news by 1972: Pong by Al Alcorn with Atari Berners-Lee @ CERN) 1980s: Gaming computers + consoles (Atari 8-bit family, BBC Micro, Acorn Electron, 2000: first internet bubble with 20% Amstrad CPC,commodore,Nintendo) world population 1983 crash (low quality games) 2007: 97% of worldwide telecommunication (51% in 2000) 1996-99 Quake FPS + net by John Carmack 2014: 40.2% of 7.2 B. (~ 3 Billions users) 1997 mobile gaming begins 1998–2013: Sixth generation consoles

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe worldworld widewide webweb andand thethe 3D3D worldworld fusionfusion

VRML (Virtual Reality Modeling Language) is created in 1995 by Dave Raggett - for educational and research purposes (not run on GPU, limited functions, no tools, + another language)

in 2011, Flash Player 11 was released with Stage3D, allowing for GPU-accelerated 3D (proprietary plug in, not a standard + performance & texture map size issues)

Epic Citadel in 2011, webGL (Web Graphics Library) a JavaScript API (openGL ES 2.0) for rendering interactive 2D & 3D computer graphics within a web browser: Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer (v .11 2014) - Mobile: BlackBerry 10, Maemo, Meego, Ubuntu Touch, WebOS, etc... Aquarium (mobile)

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WhatWhat isis webweb 3.03.0 gaming?gaming?

It is a real time 3D game, which runs on a web browser and does not require any 3rd party plug-in. The player doesn't need to install nor update the game and she/he can start playing in less than 15 sec. (new functions are available instantly and while playing) written with only 1 easy language of choice: javascript, which is widely known as a high-level, dynamic, untyped, and interpreted programming language cross platform (windows, linux/unix, Apple/mac, Android) no loss in performance in comparison to other technologies (openGL/directX) it uses webGL (which has no rendering limits) it's a “Thin Client Model” uses HTML 5 & CSS 3 for layout and styling integrates web 2.0 and web 1.0 assets native multiusers (distributed architecture) Anthony Pesch (Creating a hybrid UI system for WebGL games)

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb 3.03.0 gaminggaming landscapelandscape

Assassin's Creed Pirates demo http://fr.y8.com/tags/webgl http://race.assassinscreedpirates.com/ 150+ webgl games

Urban Galaxy Hello run

https://www.urbangalaxyonline.com/ http://hellorun.helloenjoy.com/

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe “3D“3D gamegame playplay process”process” beforebefore webGLwebGL

website Site Merchant register ecommerce mygame.com (i.e. steam.com)

email New Player

Register Install Account + OS libs Install Verif. Download Download libs (3 Gbs ~ 2-3 hrs)

updates load play

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe “3D“3D gamegame playplay process”process” beforebefore webGLwebGL

lost of identity & branding (while going through the site merchant)

the player could loose interest while browsing the site merchant

stale content & no full control over site merchant content

double/triple registration (non-secured unlock key in email, complex process to go through and organize)

time to play sores to hours (2-3 hrs for a 2Gb game)

limit the game to computer savvy players (kids, elderly, non-savvy will not go through the process)

the odds to play the game are very low (due to compatibility issues)

sentiment of scam during setup process & no instant gratification

3rd party services is solicited (smaller sales profit margin)

tedious process (13+ steps n play)

loss of time in updates

the code becomes obsolete quickly and is spread out (versioning hell)

other specific issues are encountered during the process (re-install is needed when the player uses another computer)

play first n pay is difficult

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb 3.03.0 “game“game playplay process”process” diagramdiagram

website ecommerce mygame.com register

email New Player

play load

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb 3.03.0 “game“game playplay process”process” advantagesadvantages

identity & branding preserved and the loss of interest is controlled and limited full control over content and game code (on all versions) a single registration process (Single Sign On SSO) time to play < 20 seconds instead of hours (2-3hrs) no need to be computer savvy (kids, elderly can go through the play process) compatibility issues are found < 10 seconds instant gratification

no 3rd parties solicited (except for ecommerce) the play process is trimmed down (5-steps instead of 13 steps n play) no lost of time in updates code is always the latest and it is centralized new advantages found in production (cross and up-sales) the player can use another machine without loosing configurations, states & scores play first n pay is possible and easy to propose works on all platforms compatibles with the international world standards (W3C)

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. NotableNotable factsfacts aboutabout webweb 3.03.0 gaminggaming

webGL is now 5 years old (mature) based on OpenGL ES 2.0 standards (ES: embedded systems) non-profit Khronos Group is developing webGL 2.0 specification based OpenGL ES 3.0 API the market potential is over 1.5 Billion (webGL served devices)

new players can be reached +47% (12 %=10/14 years-old, 36%=15/29 years-old, 22 % 30/40 years-old, 13 % 50+ years-old) * 51% of English players are women * large support from the Open Source community (hrs of expertise for free) 3D hardware is not expensive anymore (runs on cell phones for under $250 ) in 2014 PS4 uses webGL for its UI

* intel by AFJV - Agence Française pour le Jeu Vidéo

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. HowHow doesdoes itit work?work?

Summary of Tony Parisi “intro to webGL” at the live 2014

Javascript drawing API

uses canvas to draw elements low level : buffer, shaders, primitives GPU accelerated 2D or 3D worx

no file format, no markup, no DOM (its goes straight into the API for fast rendering)

no noticeable drawing issues (technical & perf.) compared to openGL

frameworks (libraries + APIs + editors, export/import): Three.js, SceneJS, Babylon.js, Voodoo.js

native libs: Physics, controls, particles, Uis

engines: Goo Create, Verold, turbulenz, Artillery, Unreal & (not native engine=interpreted)

few middlewares: multivers3D

tons of tutorials & help online

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe renderingrendering process:process: aa comprehensivecomprehensive diagramdiagram

Programming Rendering Pipeline Rendering output Interface

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WhatWhat isis aa “thin/web“thin/web Client”Client” modelmodel

a thin client is a lightweight computer that is built for remoting into a server. It depends heavily on another computer (the server) to fulfill its roles. (source wikipedia.org) heavy computing and security work is done on the server rendering is done at runtime on the “client machine”, it can be done on the server and images are streamed to the client like a movie benefits: hardware resource optimization (memory and processing power) reduced software maintenance: software patching, security updates, application/OS updates, and OS migrations can be applied, tested and activated for all users in one step improved security: software assets are centralized and easily fire-walled, monitored and protected. Sensitive data is uncompromised in cases of desktop loss or theft

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb 3.03.0 gaminggaming (thin(thin client)client) architecturearchitecture

Framework/middleware

Compatible App. servers Browser push/pull HTML5 (canvas) Web CSS 3 servers DBs JS WebGL enabled Streaming SVRs Players, Req./Res. Scenarists, Artists, Biz dev, Developers Other servers (mail, stats, Xmedia, ++) Internet

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WebWeb 3.03.0 gaminggaming gems:gems: thethe dynamicdynamic functionsfunctions

additions and modifications are available instantly (fixes & new functions) personalization and rewards can be created/attributed live live editing: placement/scaling of 3D object, change texture, lightning, etc... store complex data models (dynamic criteria engine) integrated web 2.0 communication tools (messenger, stored ) adaptive artificial intelligence (works with models instead of data)

PlayCanvas

https://playcanvas.com/

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WebWeb 3.03.0 gaminggaming gems:gems: thethe unifiedunified functionsfunctions

work is done simultaneously and instantly (+ cross platform) 1 single programming language easy to learn & use (model, concepts, patterns are still the same) = new talents at a lower price 1 interface to manage it all: compatible web browser (today, has the best performance + great integrated tools) scripts are published and managed in a centralized fashion (no need to update versions on player machines) ecommerce and web 2.0 assets, content, process are easily integrated development and maintenance process can be integrated within the UI

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. HowHow toto turnturn issuesissues intointo assets?assets?

“Javascript is too slow and cannot run 3D “If I build a web 3.0 game, my code will be video games, you need to use c/c++ to build a readable and someone could copy it” quality game” Your work will not be protected until you Javascript is used to initialize the 3D content protect it. before passing it to the Open GLS (GPU). It is also used for collision detection and physics Your code can be secured via: which has proven to deliver more than acceptable performance (heavy work is done -Encryptions (0,1,2,3 steps) (AES, on the server via C/C++,.NET,JAVA) NACL, RC4, proprietary, etc... ) If you have a performance problem, it is -Obfuscation: because something is wrong with the code myfunction()<=>OooQ0O() or the design (ie: too many objects, faces, vertices, wrong collision engine model). -Add a custom protection Note: JS is very easy to debug and -Do the previous steps x times debugging tools are integrated in the browser. Note: the more secured the slower the loading and lazy loader will be

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WebWeb 2.02.0 integrationintegration

Your web 3.0 game interacts directly with web technologies to leverage web 1.0 and web 2.0 investments: use a CMS to manage your game content (scripts,pages,pix,forms,etc.) add ecommerce functions to 3D objects integrate forums Q&A into the game notify players with a web 2.0 messenger leverage existing process & tools to add videos and sounds to your game create new dynamic DHTML5 tools, UIs and gadgets easily integrate existing web2.0 services (translations, videos, music, pictures, geolocalization)

integrate existing 2D animations: Flash & others 3rd party plugins trigger emails and SMSs while in game

Note: bidirectional interactions from 2D to 3D and 3D to 2D

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. WebWeb 3.03.0 AAAAAA gamesgames

none yet (maybe in the making?) all ingredients are here + creative minds = surprises

Unigine Crypt Demo

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. webweb 3.03.0 gaminggaming compatiblecompatible gearsgears

stereoscopic view: use a standard active 3D TV VR goggles: Oculus Rift, Gear VR, HTC Vive, , etc... augmented reality glasses: MS Hololens, Sony SmartEyeglass, Epson Moverio BT-200, immersion cube: use multiple views via the same thin client (to maximize resources) hands free (HFC): Leap motion, Epoc Headset Brainwave Controller touch phones & tablets: use them as control devises gamepads & joysticks: Xbox 360, Sony Playstations, ...

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. TheThe webweb 3.03.0 gaminggaming futurefuture isis promisingpromising

larger market (reach 40-75% more players) PC gaming should make a come back (why? best performance and driving the hardware market) 40% of $100 B = $40 B + of market share (not anticipated) new type of games should be released (dynamic functions allows for live sharing/creativity, infinite content) 50% of AAA games will be using a web 3.0 gaming framework by 2020 new web 3.0 gaming tools, libs, APIs, middlewares will emerge new process to build game will be in place via communities new adapted gears & display supports fusion of robotic with web 3.0 gaming (drones, football-bots, more) web 3.0 games should become the new international standard to build 3D games!

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. ToTo summarizesummarize

reach new players via the “3D game play process” (potential of +75% players ~ +40$ B) 1.5 Billion webGL served devices as of today (2016) uses a thin/web client architecture to maximize security and resources save time in development & maintenance with the unified & dynamic functions webGL is now mature and all major players support it (MS, Google, Apple) it is an international standard (W3C) rendering performances are similar to non web 3.0 technologies (openGL, DirectX) 1 easy language opens up the 3D programming door to new talents tons of free libraries, APIs, tools, examples, tutorials to help minimize the cost of transition & initial development promising future with new gears et new 3D displays new type of 3D games are in the making the 3D world and the web fusion sets a marker in the 3D gaming history

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. ThankThank youyou

I would like to thank the companies, persons, communities and other entities that have directly or indirectly helped me in the making of this presentation.

the Open Source community, the Apache foundation, Sun microsystem, the Fedora & the Ubuntu group , the Blender team, the blendswap team, the Khronos group, the W3C consortium and the Eclipse team

Michelle Allard, Laurent Joumond, Ricardo Cabello, Tony Parisi, James Baicoianu, qiao, Anthony Pesch, Jerome Etienne, Lee Stemkoski, Goddard, alteredq, Fabrice Neyret, celticluis, zz85, droid, Godzilko, J3zusla, Telford, Jo, ro.me & durian

my current and future partners

last but not least, all of you present today!

All product names and trademarks mentioned or used in this presentation are the property of their respective owners.

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved. QuestionsQuestions && answersanswers

developers players

scenarists artists Biz dev & owner ? & owner ?

2016 - web 3.0 gaming anatomy - prepared by multivers3D, all rights reserved.