SlideShare a Scribd company logo

Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG

Game Developer Conference China (2012). Programming track. This speech talks about how to use Stage3D APIs to make a 3D web game engine, and discuss some points about optimizing it.

1 of 60
Using The New Flash Stage3D Web Technology
To Build Your Own Next 3D Browser MMOG
Daosheng Mu, Lead Programmer
Eric Chang, CTO
XPEC Entertainment Inc.
Outline
• Brief of Speakers
• Introduction of Adobe Flash Stage3D API
• XPEC Flash 3D Engine
• Optimization for Flash Program
• Future Works
• Conclusion
• Q & A
Brief of Speakers
• Eric Chang
– 19 Years of Game Industry
Experiences
– Cross-platform 3D Game
Engine Development
– PC/Console/Web
Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG
Brief of Speakers
• Daosheng Mu
– 4.5 Years of Cross-platform 3D Game Engine Development
Experiences
– PC/Console/Web
Why Flash?
Native C/C++ vs. Unity vs. Flash
Native
C/C++
Unity Flash
Development
Difficulty
High Low Mid
Ease of
Cross Platform
Low High High
Performance High Mid Low
Market
Popularity Low Mid
High
(>95%)
Ad

Recommended

Introduction to A-Frame
Introduction to A-FrameIntroduction to A-Frame
Introduction to A-FrameDaosheng Mu
 
A frame beginner lesson
A frame beginner lessonA frame beginner lesson
A frame beginner lessonDaosheng Mu
 
Introduction to WebGL and WebVR
Introduction to WebGL and WebVRIntroduction to WebGL and WebVR
Introduction to WebGL and WebVRDaosheng Mu
 
A-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersA-Frame: VR for Web Developers
A-Frame: VR for Web DevelopersKevin Ngo
 
Build the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameBuild the Virtual Reality Web with A-Frame
Build the Virtual Reality Web with A-FrameMozilla VR
 
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
 

More Related Content

What's hot

Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR Saurabh Badhwar
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsGeilDanke
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLON
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLONJozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLON
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLONOutlyer
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!Takashi Yoshinaga
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularErik Guzman
 
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]Andrii Lundiak
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyMichaela Lehr
 
Only JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsOnly JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsTomáš Hromník
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsReturn on Intelligence
 
Tips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android appTips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android appJérémie Laval
 
Back to the [Completable] Future
Back to the [Completable] FutureBack to the [Completable] Future
Back to the [Completable] FutureSofiia Khomyn
 
XNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainXNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainMohammad Shaker
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the futureChris Mills
 

What's hot (19)

Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
 
WebVR - JAX 2016
WebVR -  JAX 2016WebVR -  JAX 2016
WebVR - JAX 2016
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Angular js meetup
Angular js meetupAngular js meetup
Angular js meetup
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLON
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLONJozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLON
Jozef Ve Providing Scalability for Pirates, Lizards and Zombies at #DOXLON
 
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
AI x WebXR: フェイストラッキングを用いた擬似3D表現を解説!
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
 
Vue js and Dyploma
Vue js and DyplomaVue js and Dyploma
Vue js and Dyploma
 
Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]Backbone/Marionette recap [2015]
Backbone/Marionette recap [2015]
 
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web TechnologyWriting Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web Technology
 
Only JavaScript, only Meteor.js
Only JavaScript, only Meteor.jsOnly JavaScript, only Meteor.js
Only JavaScript, only Meteor.js
 
Introduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.jsIntroduction to Backbone.js & Marionette.js
Introduction to Backbone.js & Marionette.js
 
Tips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android appTips & Tricks to spice up your Android app
Tips & Tricks to spice up your Android app
 
Back to the [Completable] Future
Back to the [Completable] FutureBack to the [Completable] Future
Back to the [Completable] Future
 
XNA L07–Skybox and Terrain
XNA L07–Skybox and TerrainXNA L07–Skybox and Terrain
XNA L07–Skybox and Terrain
 
APIs, now and in the future
APIs, now and in the futureAPIs, now and in the future
APIs, now and in the future
 

Similar to Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG

Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill) Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill) Jean-Philippe Doiron
 
PlayStation: Cutting Edge Techniques
PlayStation: Cutting Edge TechniquesPlayStation: Cutting Edge Techniques
PlayStation: Cutting Edge TechniquesSlide_N
 
Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonJean-Philippe Doiron
 
Optimizing unity games (Google IO 2014)
Optimizing unity games (Google IO 2014)Optimizing unity games (Google IO 2014)
Optimizing unity games (Google IO 2014)Alexander Dolbilov
 
The Rise of Parallel Computing
The Rise of Parallel ComputingThe Rise of Parallel Computing
The Rise of Parallel Computingbakers84
 
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개Yongho Ji
 
Unity - Internals: memory and performance
Unity - Internals: memory and performanceUnity - Internals: memory and performance
Unity - Internals: memory and performanceCodemotion
 
Gpu with cuda architecture
Gpu with cuda architectureGpu with cuda architecture
Gpu with cuda architectureDhaval Kaneria
 
3 boyd direct3_d12 (1)
3 boyd direct3_d12 (1)3 boyd direct3_d12 (1)
3 boyd direct3_d12 (1)mistercteam
 
PhD Thesis Proposal
PhD Thesis Proposal PhD Thesis Proposal
PhD Thesis Proposal Ziqiang Feng
 
The Next Generation of PhyreEngine
The Next Generation of PhyreEngineThe Next Generation of PhyreEngine
The Next Generation of PhyreEngineSlide_N
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法Unite2017Tokyo
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法Unity Technologies Japan K.K.
 
Extending Hadoop for Fun & Profit
Extending Hadoop for Fun & ProfitExtending Hadoop for Fun & Profit
Extending Hadoop for Fun & ProfitMilind Bhandarkar
 
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...Thom Lane
 
Horst Bruning Exxim Animage Stanford May409
Horst Bruning Exxim Animage Stanford May409Horst Bruning Exxim Animage Stanford May409
Horst Bruning Exxim Animage Stanford May409Burton Lee
 
Gömülü Sistemlerde Derin Öğrenme Uygulamaları
Gömülü Sistemlerde Derin Öğrenme UygulamalarıGömülü Sistemlerde Derin Öğrenme Uygulamaları
Gömülü Sistemlerde Derin Öğrenme UygulamalarıFerhat Kurt
 
.NET Memory Primer (Martin Kulov)
.NET Memory Primer (Martin Kulov).NET Memory Primer (Martin Kulov)
.NET Memory Primer (Martin Kulov)ITCamp
 
Sista: Improving Cog’s JIT performance
Sista: Improving Cog’s JIT performanceSista: Improving Cog’s JIT performance
Sista: Improving Cog’s JIT performanceESUG
 
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...Amazon Web Services
 

Similar to Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG (20)

Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill) Developing Next-Generation Games with Stage3D (Molehill)
Developing Next-Generation Games with Stage3D (Molehill)
 
PlayStation: Cutting Edge Techniques
PlayStation: Cutting Edge TechniquesPlayStation: Cutting Edge Techniques
PlayStation: Cutting Edge Techniques
 
Making a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie TycoonMaking a game with Molehill: Zombie Tycoon
Making a game with Molehill: Zombie Tycoon
 
Optimizing unity games (Google IO 2014)
Optimizing unity games (Google IO 2014)Optimizing unity games (Google IO 2014)
Optimizing unity games (Google IO 2014)
 
The Rise of Parallel Computing
The Rise of Parallel ComputingThe Rise of Parallel Computing
The Rise of Parallel Computing
 
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
2011.05.27 ACC 기술세미나 : Adobe Flash Builder 4.5를 환경에서 Molehill 3D를 이용한 개발 소개
 
Unity - Internals: memory and performance
Unity - Internals: memory and performanceUnity - Internals: memory and performance
Unity - Internals: memory and performance
 
Gpu with cuda architecture
Gpu with cuda architectureGpu with cuda architecture
Gpu with cuda architecture
 
3 boyd direct3_d12 (1)
3 boyd direct3_d12 (1)3 boyd direct3_d12 (1)
3 boyd direct3_d12 (1)
 
PhD Thesis Proposal
PhD Thesis Proposal PhD Thesis Proposal
PhD Thesis Proposal
 
The Next Generation of PhyreEngine
The Next Generation of PhyreEngineThe Next Generation of PhyreEngine
The Next Generation of PhyreEngine
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
 
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
【Unite 2017 Tokyo】インスタンシングを用いた美麗なグラフィックの実現方法
 
Extending Hadoop for Fun & Profit
Extending Hadoop for Fun & ProfitExtending Hadoop for Fun & Profit
Extending Hadoop for Fun & Profit
 
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...
CIFAR-10 for DAWNBench: Wide ResNets, Mixup Augmentation and "Super Convergen...
 
Horst Bruning Exxim Animage Stanford May409
Horst Bruning Exxim Animage Stanford May409Horst Bruning Exxim Animage Stanford May409
Horst Bruning Exxim Animage Stanford May409
 
Gömülü Sistemlerde Derin Öğrenme Uygulamaları
Gömülü Sistemlerde Derin Öğrenme UygulamalarıGömülü Sistemlerde Derin Öğrenme Uygulamaları
Gömülü Sistemlerde Derin Öğrenme Uygulamaları
 
.NET Memory Primer (Martin Kulov)
.NET Memory Primer (Martin Kulov).NET Memory Primer (Martin Kulov)
.NET Memory Primer (Martin Kulov)
 
Sista: Improving Cog’s JIT performance
Sista: Improving Cog’s JIT performanceSista: Improving Cog’s JIT performance
Sista: Improving Cog’s JIT performance
 
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...
AWS re:Invent 2016: Deep Learning at Cloud Scale: Improving Video Discoverabi...
 

Recently uploaded

AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementMimmo Squillace
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxharimaxwell0712
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Product School
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1Inbay UK
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...shaiyuvasv
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVARobert McDermott
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor FesenkoFwdays
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellencePrecisely
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...htrindia
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr TsapFwdays
 

Recently uploaded (20)

In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...In sharing we trust. Taking advantage of a diverse consortium to build a tran...
In sharing we trust. Taking advantage of a diverse consortium to build a tran...
 
AI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvementAI Act & Standardization: UNINFO involvement
AI Act & Standardization: UNINFO involvement
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Traffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptxTraffic Signboard Classification with Voice alert to the driver.pptx
Traffic Signboard Classification with Voice alert to the driver.pptx
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
Synergy in Leadership and Product Excellence: A Blueprint for Growth by CPO, ...
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
IT Nation Evolve event 2024 - Quarter 1
IT Nation Evolve event 2024  - Quarter 1IT Nation Evolve event 2024  - Quarter 1
IT Nation Evolve event 2024 - Quarter 1
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre..."Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
"Journey of Aspiration: Unveiling the Path to Becoming a Technocrat and Entre...
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
Introduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVAIntroduction to Multimodal LLMs with LLaVA
Introduction to Multimodal LLMs with LLaVA
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko
 
Automate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center ExcellenceAutomate Your Master Data Processes for Shared Service Center Excellence
Automate Your Master Data Processes for Shared Service Center Excellence
 
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
HBR SERIES METAL HOUSED RESISTORS POWER ELECTRICAL ABSORBS HIGH CURRENT DURIN...
 
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap"Running Open-Source LLM models on Kubernetes",  Volodymyr Tsap
"Running Open-Source LLM models on Kubernetes", Volodymyr Tsap
 

Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG

  • 1. Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG Daosheng Mu, Lead Programmer Eric Chang, CTO XPEC Entertainment Inc.
  • 2. Outline • Brief of Speakers • Introduction of Adobe Flash Stage3D API • XPEC Flash 3D Engine • Optimization for Flash Program • Future Works • Conclusion • Q & A
  • 3. Brief of Speakers • Eric Chang – 19 Years of Game Industry Experiences – Cross-platform 3D Game Engine Development – PC/Console/Web
  • 5. Brief of Speakers • Daosheng Mu – 4.5 Years of Cross-platform 3D Game Engine Development Experiences – PC/Console/Web
  • 6. Why Flash? Native C/C++ vs. Unity vs. Flash Native C/C++ Unity Flash Development Difficulty High Low Mid Ease of Cross Platform Low High High Performance High Mid Low Market Popularity Low Mid High (>95%)
  • 8. Introduction of Adobe Flash Stage3D API
  • 10. Stage3D • Stage3D includes with GPU-accelerated 3D APIs – Z-buffering – Stencil/Color buffer – Vertex shaders – Fragment shaders – Cube textures – More…
  • 11. Stage3D • Pros: – GPU accelerated API – Relies on DirectX, OpenGL, OpenGL ES – Programmable pipeline • Cons: – No support of alpha test – No support of high-precision texture format
  • 12. Stage3D ResourceNumber allowedTotal memory Vertex buffers 4096 256 MB Index buffers 4096 128 MB Programs 4096 16 MB Textures 4096 128 MB* Cube textures 4096 256 MB Draw call limits 32,768 *350 MB is absolute limit for textures, 340 MB is the result we gather
  • 13. AGAL • Adobe Graphics Assembly Language – No support of ‘if-else’ statements – No support of ‘constants’
  • 14. XPEC Flash 3D Engine
  • 15. Model Pipeline • Action Message Format (AMF): – Native ByteArray compression – Native object serialization 3DS Max Engine Loader Exporter Collada Binary Converter AMF AMF Engine Render
  • 16. XPEC Flash 3D Engine • Application: update/render on CPU • Command buffer: store graphics API instruction Application Command buffer Driver GPU CPU
  • 17. XPEC Flash 3D Engine: Application Object3D • Material • Geometry Update • UpdateDeltaTime • UpdateTransform Scene management • Scene partition • Frustum culling Update • UpdateHierarchy Draw • SetMaterial • SetGeometry Stage3D • Set Stage3D APIs
  • 18. Scene Management • Goal: Minimize draw calls as possible • Indoor Scene – BSP tree • Outdoor Scene – Octree/Quad tree – Cell – Grid
  • 19. Scene Management: Project C4 • Grid partition • Object3D: (MinX, MaxX), (MinY, MaxY) (0, 0) (2, 2) (4, 4) y x
  • 20. Scene Management: Project C4 • Frustum: (MinX, MaxX), (MinY, MaxY) (0, 0) (2, 2) (4, 4) (1,4),(0,4) y x
  • 21. XPEC Flash 3D Engine: Command Buffer Initialize • createVertex/Index Buffer • createTexture • createProgram Begin • clear • setRenderToTexture Draw • setVertex/Index Buffer • setProgram • setProgramConstants • setRenderState • setTextureAt • drawTriangles End • present • Avoid user/kernel mode transition • Decrease shader patching – “Material sorting” • Reduce draw call – “Shared buffers” – “Dynamic batching”
  • 23. Material Sorting • State management • 1047/2598 draw calls
  • 24. 0 10 20 30 40 50 60 NVIDIA 8800GT - 1047 draw calls NVIDIA 8800GT - 1047 draw calls with material sorting NVIDIA 8800GT - 2598 draw calls NVIDIA 8800GT - 2598 draw calls with material sorting Elapsedtime(ms) CPU waiting GPU Render loop
  • 25. 0 10 20 30 40 50 60 70 80 90 100 NVIDIA 6600GT - 1047 draw calls NVIDIA 6600GT - 1047 draw calls with material sorting NVIDIA 6600GT - 2598 draw calls NVIDIA 6600GT - 2598 draw calls with material sorting Elapsedtime(ms) CPU waiting GPU Render loop
  • 26. Before sorting(ms) After sorting(ms) NVIDIA 8800 GT - 1047 draw calls Render loop elapsed time 16 16 Total elapsed time 41 40 NVIDIA 8800 GT - 2598 draw calls Render loop elapsed time 36 36 Total elapsed time 50 50 Before sorting(ms) After sorting(ms) NVIDIA 6600 GT - 1047 draw calls Render loop elapsed time 34 31 Total elapsed time 53 48 NVIDIA 6600 GT - 2598 draw calls Render loop elapsed time 81 64 Total elapsed time 89 89
  • 27. Shared Buffers • Problem: – Numbers of buffers are limited ResourceNumber allowedTotal memory Vertex buffers 4096 256 MB Index buffers 4096 128 MB Programs 4096 16 MB
  • 29. Particle System • Each particle property is computed on the CPU at each frame – Alpha, Color, LinearForce, Size, Speed, UV – Facing
  • 30. Particle System • Index buffer – Indices will not be changed • Vertex buffer – Problem: • Particle amount depends on frame • Upload data to vertex buffer frequently
  • 32. Skinned Model • Problem: – Lesser vertex constants allowed • 128 constants per vertex program – Global vertex constants • Lighting, Fog, Const
  • 33. Skinned Model • 4x3 Matrix • Bone count per geometry is limited to 29 – “Split mesh” 128 constants / 3 = 42.6666 bones 3 * 29 bones = 87 constants
  • 35. Shadow Map present() End frame setRenderToBackBuffer() Set shadow map setRenderToTexture() Clear shadow map Draw to shadow map clear() Clear back buffer
  • 36. Shadow Map • Problem: – Texture format: RGBA8 – Artifact • Aliasing • Popping while moving
  • 37. • Size: 1024x1024 • RGBA8  R32 Shadow Map
  • 38. Shadow Map • Percentage Closer Filtering (PCF) solution: – Hard shadow – Aliasing – Popping while moving
  • 39. Shadow Map • PCF pw = 1/mapWidth ph = 1/mapHeight • Result = 0.5 * texel( 0, 0) + 0.125 * texel( -pw, +ph) + 0.125 * texel(-pw, -ph) + 0.125 * texel( +pw, +ph) + 0.125 * texel(+pw, -ph) (-pw , +ph) (+pw , +ph) (0, 0) (+pw , -ph)(-pw , -ph)
  • 40. Shadow Map • PCF based solution: 0 20 40 60 80 100 NVIDIA 6600GT - 1047 draw calls NVIDIA 6600GT - 1047 draw calls with PCF NVIDIA 8800GT - 1047 draw calls NVIDIA 8800GT - 1047 draw calls with PCF Elapsedtime(ms) CPU waiting GPU Render loop
  • 41. Toon Shading • Single pass – Problem: Dependent on no. of face • Two passes – Scale vertex position following the vertex normal – Not dependent on no. of face 𝑣 ∶ 𝑣𝑖𝑒𝑤 𝑣𝑒𝑐𝑡𝑜𝑟 𝜃 𝑖𝑓 𝜃 > 𝑡ℎ𝑟𝑒𝑠ℎ𝑜𝑙𝑑, 𝑑𝑟𝑎𝑤 𝑡𝑜𝑜𝑛 𝑐𝑜𝑙𝑜𝑟 𝑁 : 𝑣𝑒𝑟𝑡𝑒𝑥 𝑛𝑜𝑟𝑚𝑎𝑙
  • 42. Toon Shading • Enable back face • Scale vertex position • Draw color Toon • Enable front face • Draw material General Result
  • 43. Alpha Test • Problem: – Stage3D without alpha test – “kil opcode in AGAL” • Performance penalty on mobile device
  • 44. Alpha Test • Solution: Render loop time(ms) Total time(ms) 6600GT alpha test 17~19 47 6600GT alpha blend 18~19 65~67 8800GT alpha test 0.16 37 8800GT alpha blend 0.3 36 •304 draw calls •Alpha-test performance is better on desktop Replace alpha-test with alpha-blend
  • 46. Static Lightmap • Pros: – Pre-computation – Global illumination • Cons: – More textures
  • 48. Optimization for Flash Program • Problem: – For Each is slow • “Use for-loop to replace it” – Memory management • “Recycle manager” • “Strengthen garbage collection”
  • 49. Optimization for Flash Program • Solution: – Recycle manager • Reduce garbage collection loading • Save objects initial time • public function recycleObject3D( obj:IObject3D ):void • public function requestObject3D( classType:int , searchKey:*, renderHandle:int = 0 ):*
  • 50. Optimization for Flash Program • Solution: – Strengthen garbage collection • Avoid inner function • Force to dereference function pointer • Dereference attribute in object destructor
  • 51. • Avoid inner function • Force to dereference function pointer Without inner function Use inner function
  • 52. Optimization for Flash Program • Experiment: before vs. after – Switching among levels Before improvement: After improvement :
  • 54. Rapid loading • Streaming – Data compression • PNG: swf compression: 20%~55% • Package: zip compression: 25~30% – Batch loading • Separate resource to several packages • Download what you really need
  • 56. Rapid loading Enter to avatar stage Enter to game stage After loading picture finished 5Mb/s Elapsed time (sec) 15 6 12 • game code • ui • game scene • scene textures
  • 57. Future Works • Adobe Texture Format (ATF) – Support for compressed/mipmap textures on the different GPU chipset • FlasCC – C++  AS3 Compilation • AS3 Workers – Multi-thread support • MovieClip – Replace with Stage3D UI framework, ex: Starling
  • 58. Conclusion • Cross-Device/Cross-OS/Cross-Browser – Browser + Cloud Computing – Write Once, Run Anywhere • Flash vs. HTML5 • Cross-Compiling Technology Trend – C/C++ + Flash/ActionScript – C/C++ + HTML5/JavaScript
  • 59. Acknowledgements • XPEC - Project C4 Team • XPEC - RDO Team

Editor's Notes

  1. 2011.2 release Based on flash player benefit: 市佔高、用戶多、商業行為市場大 3D API: 並且跨平台( browsers, mobile devices ),叫做stage3D。一個Flash Player最多可以使用到4個stage3D,所以可以做同時四個視窗的應用。
  2. One codebase 跨所有的瀏覽器。所有使用flash player開發的應用都可以橫跨所有瀏覽器,並且效能差距也不大。 如果現在要用Html5 WebGL來做遊戲最常被討論的就是在哪個瀏覽器上效能差距如何,因為它是被不同瀏覽器所來處理 而Flash的所有程式都是在一個flash player內被執行,因此在 stage3D上作3D遊戲效能並不會差距很大。
  3. Stage3d 提供了一般3d api該要有的功能:
  4. Alpha test: 不支援一般desktop 3d api理應提供的render state,需要我們在pixel shader額外加上指令 RGBA: 對於高精確度的圖檔格式並沒有提供,每個channel只能存入8bit資料。我們在開發shadow map時,必須要特殊儲存方式的貼圖來存放深度資訊。
  5. 最大公約數 texture 128 MB for mobile device,PC大約是340 MB。 MMOG仍然不夠用
  6. Assembly -> ByteArray -> Program3D 不能使用branching, if…, 常數一定要透過shader constant傳入,不能直接在shader內被宣告 Pixelbender3D is readable and high-level, but AGAL is a good way to have good performance
  7. 以上是stage3D的介紹 接下來我想要分享我們如何使用Stage3D來打造一個適合Web MMORPG引擎的經驗
  8. 一個遊戲引擎都會需要適合自己的binary format。 AMF: AMF是Adobe獨家開發出来的通信協議,主要用於Flash/Server溝通 可以使用原生的壓縮方式。 使用原生的序列化讀取,資料讀入方便。
  9. 如何做出一個效能好的3d engine 要了解CPU-driver-GPU CPU會將3d api的指令傳給command buffer,當時機到了之後就會交給driver指派給GPU來做處理 我們可以努力的部分就是CPU的部分。
  10. UpdateTransform: world transform UpdateHierarchy: 更新角色骨架、或是particle的property Scene management: 正常的選擇方法~~~ex: bsp, cell…
  11. Mode transition: User mode – 不能存取hardware相關資源 Kernel mode – 可以透過driver存取hardware資源 如何使用這些stage3D APIs: Initialize做的事不要在update的時候做 Update執行的command越少越好 ---
  12. 這裡有五個model,三種不同material 1: 會要切換五次material。 2: 排序過後,只需要切換三次material,command buffer所存放的指令變少了,也就可以減少mode transition帶來的penalty
  13. 8800GT 效能上無明顯差距 CPU: Core2Duo E4500 2.2G
  14. 6600GT CPU: Pentium4 3.0G 1047 draw calls - CPU api call花費了許多時間 - GPU 處理也影響到最後的總時間 2598 draw calls - CPU api call的時間差距更明顯 - 總時間沒有差距,整體上GPU已經到達瓶頸
  15. 雖然material sorting在6600GT才有明顯效能提升,但我們的引擎是提供給Web game的專案使用 Web game的進入門檻較低,此優化方法能讓低階硬體玩家,享受到優化後的效能提升。
  16. MMOG的人物、配件數目很多 容易遭遇到限制上限
  17. Can put same model share the same buffer 可以減少buffer創建的份數
  18. Facing to screen, facing up, facing to parent, facing view up 未來應該要實作GPU particle,目前在CPU方面計算特效非常吃重
  19. 一條vertex buffer,在particle要被生成的時候再被加入這條buffer。 好處: 節省buffer數目,如果material是一樣的甚至可以一起發出draw call 隱憂: Stage3D並沒有一個flag可以指定這條buffer想用動態屬性,他們現在一律都是靜態屬性,修改buffer內容會比較傷害效能,好在我們一個frame只會做一次。
  20. 由於vertex constant不多,我們又固定幾條是用來當做全域設定, Bone matrix 4x4
  21. 所以我們能給bone matrix使用的剩下不多 考慮一個draw call…增加draw call 拆mesh
  22. 將深度的計算結果評分配到各個channel
  23. PCF (percentage-closure filter)
  24. Put on different with PCF and non-pcf Vexel.depth result > shadowMapResult color is black Vexel.depth result < shadowMapResult color is white 選shadow map的原因: 地形高低起伏,正確的深度投影、自投影可以視情況關閉
  25. 整體效能並沒有影響
  26. Game is comic style Two pass效能差 選two pass原因: 因為我們面數過低
  27. 選two pass原因: 因為我們面數過低
  28. It can be removed, one mobile use alpha blend to replace 我們曾經為了將我們的demo放到iPad上,fps 從1x~2x,就是把所有用到alpha test的 material改成alpha blend
  29. Alpha blend在desktop其實影響比較嚴重。
  30. 以下還有一些我們引擎擁有的效果,今天沒有時間一一細講
  31. 省去realtime光影的計算
  32. Memory leak: 由於一些物件被認為是有reference到,造成GC機制不會去回收它,但我們其實認為他理應要被回收,所以造成記憶體被堆疊 Memory leak: inner function, dereference, recycle For loop use for loop to replace for each
  33. Memory leak: 由於一些物件被認為是有reference到,造成GC機制不會去回收它,但我們其實認為他理應要被回收,所以造成記憶體被堆疊 Memory leak: inner function, dereference, recycle For loop use for loop to replace for each
  34. Memory leak: inner function, dereference, recycle For loop use for loop to replace for each
  35. GC不如開發者所想的理想化在適當的地方都要被正確回收 Inner function: 記憶體累積快速,並且GC的啟動很頻繁
  36. 一個不停創建含有 inner function物件的實驗,回收就自動交由flash vm的GC來處理
  37. 說明釋放跟載入
  38. Web game最重要的部分就是能夠快速進入場景 資料量小 下載量少
  39. 第一次進入遊戲,cache清空狀態
  40. 以上,就是今天所分享的關於Stage3D製作web 3d MMOG engine心得,未來仍有許多需要加強優化的項目。 PNG: memory usage is large, no-size compression, mipmap Alchemy: 70% native code performance Starling 可以取代movieclip提供完整3d加速