SlideShare a Scribd company logo
Show your life with emotion
Thomas, VR Engineer (@thomasbalou)
Handling collisions in WebGL
and THREEJS
Beloola in a few words
● 6 years old company
● WebVR social platform
● User created 3D spaces
● Content aggregation
from best of breeds
platforms
● Customizable avatars
● Social interactions
Beloola historic
From static world to procedural collision
Beloola before: a static world
● Nice worlds handled by
designers but...
● Big 3D mesh
● Long download and
parsing time
● Static world, not easy to
modify
Using an heightmap for collisions
● Raster image: grid of
pixels containing
height datas
● Easy to read (.raw file)
● Lightweight
● But not fit for dynamic
collision2746*4000 pixel -> 36.6*53.04 meters (118*174 feet)
How to retrieve heightmap
informations
A clean slate for better worlds
● Moving forward from
static worlds to user
generated content
● Design of a builder tool
● Development of a
system of collision
between objects
Raycast and Octree
How to handle collisions in high filled worlds
How to handle multiple meshs
● Multiple meshs in the
same space
● Catch 2D user input in
a 3D world
Using the raycast to catch mouse
input
The octree algorithm
● External library by Collin Hover (https://github.com/collinhover/threeoctree)
● Subdivise the scene in cubes to simplify proximity
calculation
"Octree2" by WhiteTimberwolf
Using the octree in THREEJS
Handling collisions on movement
● Avatar has to check for
collision on movement
● Multiple collision
directions to look for
● Too much collision
detection can be costly
Calculating collisions in realtime
Handling avatar collisions in Beloola
Handling avatar collisions in Beloola
Handling avatar collisions in Beloola
Handling avatar collisions in Beloola
Thank you

More Related Content

Similar to How to handle collisions in Beloola with THREEJS

3 D Internet
3 D Internet3 D Internet
3 D Internet
Akshay Vasava
 
3D Internet
3D Internet3D Internet
3D Internet
Shivam Bharti
 
Introduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin PlatformIntroduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin Platform
SANGHEE SHIN
 
Power of WebGL (FSTO 2014)
Power of WebGL (FSTO 2014)Power of WebGL (FSTO 2014)
Power of WebGL (FSTO 2014)
Verold
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
DevClub_lv
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JSFestUA
 
Codemotion Milano 2014 - MongoDB and the Internet of Things
Codemotion Milano 2014 - MongoDB and the Internet of ThingsCodemotion Milano 2014 - MongoDB and the Internet of Things
Codemotion Milano 2014 - MongoDB and the Internet of Things
Massimo Brignoli
 
Abhi ppt
Abhi pptAbhi ppt
Abhi ppt
Abhinav Pal
 
3D Internet
3D Internet3D Internet
3D Internet
Abhinav Pal
 
3D Internet
3D Internet3D Internet
3D Internet
Abhinav Pal
 
3D INTERNET
3D INTERNET3D INTERNET
3D INTERNET
rahulrj9
 
Metaverse and Digital Twins on Enterprise-Public.pdf
Metaverse and Digital Twins on Enterprise-Public.pdfMetaverse and Digital Twins on Enterprise-Public.pdf
Metaverse and Digital Twins on Enterprise-Public.pdf
湯米吳 Tommy Wu
 
3D Internet
3D Internet3D Internet
3D Internet
nandu888
 
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
DataScienceConferenc1
 
3D Internet
3D Internet3D Internet
3D Internet
Sravan Narra
 
Web visualization of complex reality-based 3D models with Nubes
Web visualization of complex reality-based 3D models with NubesWeb visualization of complex reality-based 3D models with Nubes
Web visualization of complex reality-based 3D models with Nubes
3D ICONS Project
 
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map EngineAGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
Camptocamp
 
BB8 RUN - A Star Wars video game
BB8 RUN - A Star Wars video gameBB8 RUN - A Star Wars video game
BB8 RUN - A Star Wars video game
Roberto Falconi
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
David Galeano
 
UE4 Landscape
UE4 LandscapeUE4 Landscape
UE4 Landscape
Che (ZUL) Abdullah
 

Similar to How to handle collisions in Beloola with THREEJS (20)

3 D Internet
3 D Internet3 D Internet
3 D Internet
 
3D Internet
3D Internet3D Internet
3D Internet
 
Introduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin PlatformIntroduction to mago3D, an Open Source Based Digital Twin Platform
Introduction to mago3D, an Open Source Based Digital Twin Platform
 
Power of WebGL (FSTO 2014)
Power of WebGL (FSTO 2014)Power of WebGL (FSTO 2014)
Power of WebGL (FSTO 2014)
 
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
AAA 3D GRAPHICS ON THE WEB WITH REACTJS + BABYLONJS + UNITY3D by Denis Radin ...
 
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3DJS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
JS Fest 2019. Денис Радин. AAA 3D графика в Web с ReactJS, BabylonJS и Unity3D
 
Codemotion Milano 2014 - MongoDB and the Internet of Things
Codemotion Milano 2014 - MongoDB and the Internet of ThingsCodemotion Milano 2014 - MongoDB and the Internet of Things
Codemotion Milano 2014 - MongoDB and the Internet of Things
 
Abhi ppt
Abhi pptAbhi ppt
Abhi ppt
 
3D Internet
3D Internet3D Internet
3D Internet
 
3D Internet
3D Internet3D Internet
3D Internet
 
3D INTERNET
3D INTERNET3D INTERNET
3D INTERNET
 
Metaverse and Digital Twins on Enterprise-Public.pdf
Metaverse and Digital Twins on Enterprise-Public.pdfMetaverse and Digital Twins on Enterprise-Public.pdf
Metaverse and Digital Twins on Enterprise-Public.pdf
 
3D Internet
3D Internet3D Internet
3D Internet
 
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
[DSC Europe 22] Data Science behind Mesh-To-MetaHuman - Jovan Mijatov
 
3D Internet
3D Internet3D Internet
3D Internet
 
Web visualization of complex reality-based 3D models with Nubes
Web visualization of complex reality-based 3D models with NubesWeb visualization of complex reality-based 3D models with Nubes
Web visualization of complex reality-based 3D models with Nubes
 
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map EngineAGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
AGIT 2017: Cesium 1.35, WebGL Virtual Globe and Map Engine
 
BB8 RUN - A Star Wars video game
BB8 RUN - A Star Wars video gameBB8 RUN - A Star Wars video game
BB8 RUN - A Star Wars video game
 
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game developmentmloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
 
UE4 Landscape
UE4 LandscapeUE4 Landscape
UE4 Landscape
 

Recently uploaded

Rainfall intensity duration frequency curve statistical analysis and modeling...
Rainfall intensity duration frequency curve statistical analysis and modeling...Rainfall intensity duration frequency curve statistical analysis and modeling...
Rainfall intensity duration frequency curve statistical analysis and modeling...
bijceesjournal
 
Curve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods RegressionCurve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods Regression
Nada Hikmah
 
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
IJECEIAES
 
Engineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdfEngineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdf
abbyasa1014
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Sinan KOZAK
 
22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt
KrishnaveniKrishnara1
 
AI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptxAI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptx
architagupta876
 
132/33KV substation case study Presentation
132/33KV substation case study Presentation132/33KV substation case study Presentation
132/33KV substation case study Presentation
kandramariana6
 
An Introduction to the Compiler Designss
An Introduction to the Compiler DesignssAn Introduction to the Compiler Designss
An Introduction to the Compiler Designss
ElakkiaU
 
An improved modulation technique suitable for a three level flying capacitor ...
An improved modulation technique suitable for a three level flying capacitor ...An improved modulation technique suitable for a three level flying capacitor ...
An improved modulation technique suitable for a three level flying capacitor ...
IJECEIAES
 
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
Gino153088
 
cnn.pptx Convolutional neural network used for image classication
cnn.pptx Convolutional neural network used for image classicationcnn.pptx Convolutional neural network used for image classication
cnn.pptx Convolutional neural network used for image classication
SakkaravarthiShanmug
 
artificial intelligence and data science contents.pptx
artificial intelligence and data science contents.pptxartificial intelligence and data science contents.pptx
artificial intelligence and data science contents.pptx
GauravCar
 
Mechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdfMechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdf
21UME003TUSHARDEB
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
UReason
 
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
Yasser Mahgoub
 
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
ecqow
 
Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...
bijceesjournal
 
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
171ticu
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
MDSABBIROJJAMANPAYEL
 

Recently uploaded (20)

Rainfall intensity duration frequency curve statistical analysis and modeling...
Rainfall intensity duration frequency curve statistical analysis and modeling...Rainfall intensity duration frequency curve statistical analysis and modeling...
Rainfall intensity duration frequency curve statistical analysis and modeling...
 
Curve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods RegressionCurve Fitting in Numerical Methods Regression
Curve Fitting in Numerical Methods Regression
 
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
Electric vehicle and photovoltaic advanced roles in enhancing the financial p...
 
Engineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdfEngineering Drawings Lecture Detail Drawings 2014.pdf
Engineering Drawings Lecture Detail Drawings 2014.pdf
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
 
22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt22CYT12-Unit-V-E Waste and its Management.ppt
22CYT12-Unit-V-E Waste and its Management.ppt
 
AI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptxAI assisted telemedicine KIOSK for Rural India.pptx
AI assisted telemedicine KIOSK for Rural India.pptx
 
132/33KV substation case study Presentation
132/33KV substation case study Presentation132/33KV substation case study Presentation
132/33KV substation case study Presentation
 
An Introduction to the Compiler Designss
An Introduction to the Compiler DesignssAn Introduction to the Compiler Designss
An Introduction to the Compiler Designss
 
An improved modulation technique suitable for a three level flying capacitor ...
An improved modulation technique suitable for a three level flying capacitor ...An improved modulation technique suitable for a three level flying capacitor ...
An improved modulation technique suitable for a three level flying capacitor ...
 
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
 
cnn.pptx Convolutional neural network used for image classication
cnn.pptx Convolutional neural network used for image classicationcnn.pptx Convolutional neural network used for image classication
cnn.pptx Convolutional neural network used for image classication
 
artificial intelligence and data science contents.pptx
artificial intelligence and data science contents.pptxartificial intelligence and data science contents.pptx
artificial intelligence and data science contents.pptx
 
Mechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdfMechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdf
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
 
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
2008 BUILDING CONSTRUCTION Illustrated - Ching Chapter 02 The Building.pdf
 
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
一比一原版(CalArts毕业证)加利福尼亚艺术学院毕业证如何办理
 
Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...Comparative analysis between traditional aquaponics and reconstructed aquapon...
Comparative analysis between traditional aquaponics and reconstructed aquapon...
 
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样官方认证美国密歇根州立大学毕业证学位证书原版一模一样
官方认证美国密歇根州立大学毕业证学位证书原版一模一样
 
Properties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptxProperties Railway Sleepers and Test.pptx
Properties Railway Sleepers and Test.pptx
 

How to handle collisions in Beloola with THREEJS