Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf

•

0 likes•54 views

Presentation given at UI/UX Conference by Geekle in Nov 2023 (https://geekle.us/schedule/uiux23vol2) It includes Immersive modern web APIs and library demos etc including Three.js, WebXR, Web Audio and Tensorflow.js. Note: Please download the presentation in order to access the hyperlinks within the slides.

Technology

Immersive Web apps using
Three.js, WebXR, Web Audio and
Tensorﬂow.js
Suyash Joshi
Creative Technologist at Magical Interactions
@suyashcjoshi

What is Immersive Web ?
Reference : https://www.w3.org/immersive-web/

Manufacturer XR Device with browser
Meta
Quest, Quest 2, Quest Pro, Quest
3, Rift, Rift S
Apple Vision Pro
Microsoft HoloLens 1, HoloLens 2
HTC
Vive Focus 3, Vive Elite XR, Vive,
Vive Pro, Vive Pro 2
Pico Neo 3, 4, 4 Enterprise
Huawei VR 3dof, VR 6dof
Samsung Gear VR, Odyssey
Google Cardboard, Daydream View
Varjo VR-1, VR-2, VR-3
Valve Index
Magic Leap Legacy WebVR only: 1, 2
Lynx XR 1
Lenovo
ThinkReality VRX, ThinkReality
A3
HP Reverb G2 Reference : https://wonderlandengine.com/about/webxr/

Making Immersive Web Apps more magical!
The What The How - Low level
Browser Specification /
Standard
The How - High level
Library/Framework/Tool
Intelligent Web Apps WebGPU, Webassembly
(Wasm)
Tensorflow.js, ONNX
Runtime Web, Mediapipe,
Brain.js
Spatial Web Apps, Games
with controllers
WebXR Device API A-Frame, Unity WebGL
3D Visualizations, Games WebGL API Babylon.js, PlayCanvas,
Three.js, react-three-fiber
2D Games, Physics, Art HTML Canvas API, Audio,
Video elements
p5.js, phaser, matter.js
Immersive Audio Web Audio, Web MIDI APIs Tone.js, Howler.js

Web Demos
1. Web XR
2. Machine Learning on browser + Hand Tracking
3. Spatial Music

Thank you :)
suyash@magicalinteractions.com

High Performance/Real-Time Web Applications can suffer from serial program execution, which can greatly decrease user experience, usability, application capabilities and overall performance. The new HTML5 WebWorker JavaScript API allows for multithreading in browser environment, which has removed serial code bottleneck that has always been an issue for processor intensive applications. Specifically at Game Theory Labs we were able to increase the performance of our application by 55% utilizing the techniques discussed. This meetup will show off the variations in the WebWorker API, associated overhead using the API, various WebWorker architectures (Inline vs External, Static vs Dynamic, Nested vs Shared) as well as implementing a 2-Tier Thread Management system that allows for generating child process outside of the main thread thereby increasing performance of handling/merging data between threads and the main application.

PartyRocking: Jugando con Javascript y Websockets

Ruben Chavarri

En el mundillo web siempre hemos visto la comunicación síncrona como asignatura pendiente, hasta ahora las alternativas eran muy complejas, hasta la aparición de los websockets. Seguramente todos hemos alucinado con la creación de nuestro primer chat y nos hemos emocionado con sus posibilidades. Nuestra propuesta es jugar con el chat hasta convertirlo en un juego matazombies, demostrando el potencial del mix Javascript, websockets con NodeJS, y terminar con un debate sobre las posibilidades de futuro. Contenido de la charla: - Tras una breve introducción de las tecnologías que vamos a utilizar. partiremos de una aplicación básica de chat, que iremos modificando hasta convertirla en un juego interactivo. - Buenas prácticas y lecciones aprendidas, desde el despliegue en dispositivos móviles, la gestión de participantes, hasta la sincronización y rendimiento del interfaz. - Visualización de algunas demos y ejemplos. - Analizaremos las nuevas oportunidades en el mercado del Gaming, donde el rendimiento ya no es un problema con aceleradores de JS como CocoonJS o Famo.us, o la escalabilidad de los servicios de Websockets. Para ver algunos experimientos, visitar: http://www.partyrocking.tv

Firefox OS, HTML5 pour le mobile - Code(love) Hackathon - 2014-05-28

Frédéric Harper

HTML5 est un pas de géant dans la bonne direction: il apporte plusieurs fonctionnalités dont les développeurs avaient besoin pour créer plus facilement de meilleures expériences web. Il a aussi fait naitre un débat sans fin: applications natives ou applications web! Lors de cette présentation, Frédéric Harper vous montrera comment le web ouvert peut vous aider à créer des applications mobiles de qualités. Vous en apprendrez plus sur des technologies telles que les WebAPIs, ainsi que les outils qui vous permettront de viser un nouveau marché avec Firefox OS et le web d’aujourd'hui.

Getting started with Unity and AR/VR for the .NET developer

Davide Zordan

Slides from my presentation at DDD conference 2019 https://www.developerdeveloperdeveloper.com. Abstract: We all see the cool demos of how augmented and virtual reality are going to be the future of our interaction with devices, but it often feels like there’s a significant barrier to getting started in building these types of apps. This session is here to help. If you’ve ever thought about developing for Oculus Rift, HTC Vive or the Windows Mixed Reality headsets, but haven’t known where to start, this is the session for you. At DDD, I will present what I learned building a small game, set in a mysterious dungeon using Unity and the SteamVR plugin. We'll explore how to import assets from the Unity store, how to implement locomotion techniques and interactions using the motion/touch controllers, including some tips for optimising performance and avoid motion sickness. Come along, there’ll be .NET code, demos and we’ll have some fun looking at how you can get started on your first VR/AR project.

How to be a Developer

Reza Nurfachmi

Developer < eat love code >

Rizky Ariestiyansyah

Mozilla gave the web development community a wake up call last year at GDC by demonstrating the Unreal Engine running in the browser. Graphics, audio, networking, all performing natively in Javascript, without plugins. The implications for game development are huge - no more painful porting to multiple platforms, and significantly faster user acquisition. But we’re not talking about technology in the latest game console, we’re talking about technology in your web browser. Technology that is available to you, as a web designer and developer. It’s pushing the frontier of web design, and we’re all going to be better for it. Mozilla’s demo was made possible largely because of WebGL, the Javascript API that lets web developers write directly to the graphics card. WebGL is an open standard that has been gaining momentum over the last three years. Alone, it opens up massive opportunities for data visualization and high performance graphics in your web apps and games. But it’s not alone, it’s part of an alphabet soup of advanced features in modern browsers that give creative coders unprecedented freedom: WebGL for graphics, WebCL and Web Workers for processing, WebRTC for networking, Web Sockets for real-time services and hardware device access. Folks, there is a new frontier to be explored. Thanks to your modern browser, you have more raw horsepower than you could ever have imagined. I’m going to show you what’s possible, and inspire you to reach out of your comfort zone and use this new freedom to create next generation user experiences. The web is sexy again, let’s rock it!

AR and VR development tools and platforms

Sushmita Chatterjee

Immersed in the Web

Luis Diego González-Zúñiga, PhD

Getting started with Unity and AR/VR for the .NET developer... Reloaded!

Davide Zordan

East of Toronto .NET Usergroup - Put the 5 in HTMLFrédéric Harper

J querypresentationMahesh Reddy

Bridging Realitites

Luis Diego González-Zúñiga, PhD

HTML for the Mobile Web, Firefox OS

All Things Open

Ferguson VR Hackathon - May 6, 2017

Roland Olivier Dubois

Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...

Frédéric Harper

Azure Day Rome Reloaded 2019 - Getting Started with Unity, AR/VR and Azure Co...

azuredayit

We all see the cool demos of how augmented and virtual reality are going to be the future of our interaction with devices, but it often feels like there’s a significant barrier to getting started in building these types of apps. This session is here to help. If you’ve ever thought about developing for Oculus Rift S, HTC VIVE or the Windows Mixed Reality headsets, but haven’t known where to start, this is the session for you. At Azure day, I will present what I learned building a small game, set in a mysterious dungeon using Unity, the SteamVR plugin and Azure Cognitive Services. We'll explore how to import assets from the Unity store, how to implement locomotion techniques and interactions using the motion/touch controllers, including some tips for optimising performance and avoid motion sickness. Come along, there’ll be .NET code, demos and we’ll have some fun looking at how you can get started on your first VR/AR project enhanced by Azure and the intelligent cloud.

baidu开发者大会 - Web App开发框架介绍以及分析joylite

Robert hall2017 android_np

Robert Hall

The Powerful VR WEB Is Here

Animation Kolkata

Prototyping in aframe

Kumar Ahir

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27

Frédéric Harper

Shift Remote: WEB - The Features of WebXR Beyond Virtual Reality - Ada Rose C...

Shift Conference

The Enterprise Dilemma: Native vs. Web

Motorola Mobility - MOTODEV

MOTODEV Technology Evangelist, Suzanne Alexandra covers the many factors involved in choosing to develop an Android or web app that will meet enterprise requirements. She provides tips and best practices, and reviews sample apps on each platform. Topics include: -Key business and technology advantages of each approach -Examples of apps built on each platform -Browser support of HTML5 features -The hybrid app approach Twitter hashtag: #nativevsweb Got questions about this event tweet @motodev or post them on community.developer.motorola.com

Automatic Mental State Recognition

Suyash Joshi

API Challenges for the Metaverse (AR, VR) Ecosystem

Suyash Joshi

Similar to Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf

Making VR Webby

Luis Diego González-Zúñiga, PhD

Scotland JS 2016 Keynote: The VR Web and the Future of the Browser

Liv Erickson

Rockin' the Web into the Next Dimension: JQueryTO 2014 Final Keynote

Verold

AR and VR development tools and platforms

Sushmita Chatterjee

Immersed in the Web

Luis Diego González-Zúñiga, PhD

Getting started with Unity and AR/VR for the .NET developer... Reloaded!

Davide Zordan

East of Toronto .NET Usergroup - Put the 5 in HTMLFrédéric Harper

J querypresentationMahesh Reddy

Bridging Realitites

Luis Diego González-Zúñiga, PhD

HTML for the Mobile Web, Firefox OS

All Things Open

Ferguson VR Hackathon - May 6, 2017

Roland Olivier Dubois

Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...

Frédéric Harper

Azure Day Rome Reloaded 2019 - Getting Started with Unity, AR/VR and Azure Co...

azuredayit

baidu开发者大会 - Web App开发框架介绍以及分析joylite

Robert hall2017 android_np

Robert Hall

The Powerful VR WEB Is Here

Animation Kolkata

Prototyping in aframe

Kumar Ahir

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27

Frédéric Harper

Shift Remote: WEB - The Features of WebXR Beyond Virtual Reality - Ada Rose C...

Shift Conference

The Enterprise Dilemma: Native vs. Web

Motorola Mobility - MOTODEV

Similar to Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf (20)

Making VR Webby

Scotland JS 2016 Keynote: The VR Web and the Future of the Browser

Rockin' the Web into the Next Dimension: JQueryTO 2014 Final Keynote

AR and VR development tools and platforms

Immersed in the Web

Getting started with Unity and AR/VR for the .NET developer... Reloaded!

East of Toronto .NET Usergroup - Put the 5 in HTML

J querypresentation

Bridging Realitites

HTML for the Mobile Web, Firefox OS

Ferguson VR Hackathon - May 6, 2017

Firefox OS - The platform you deserve - Firefox OS Budapest workshop - 2013-1...

Azure Day Rome Reloaded 2019 - Getting Started with Unity, AR/VR and Azure Co...

baidu开发者大会 - Web App开发框架介绍以及分析

Robert hall2017 android_np

The Powerful VR WEB Is Here

Prototyping in aframe

Firefox OS - The platform you deserve - Athens App Days - 2013-11-27

Shift Remote: WEB - The Features of WebXR Beyond Virtual Reality - Ada Rose C...

The Enterprise Dilemma: Native vs. Web

Recently uploaded

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

Tobias Schneck

As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other? Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.

UiPath Test Automation using UiPath Test Suite series, part 3

DianaGray10

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

Product School

The Art of the Pitch: WordPress Relationships and Sales

Laura Byrne

Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes? All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality

Inflectra

In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring. Learn about: • The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks. • Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective. • Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification. • Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process. Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

Accelerate your Kubernetes clusters with Varnish Caching

Thijs Feryn

Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...

Thierry Lestable

Leading Change strategies and insights for effective change management pdf 1.pdf

OnBoard

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

FIDO Alliance

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Sri Ambati

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024

Albert Hoitingh

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

BookNet Canada

The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more. Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/ Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.

JMeter webinar - integration with InfluxDB and Grafana

RTTS

Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application. In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics. Length: 30 minutes Session Overview ------------------------------------------- During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana: - What out-of-the-box solutions are available for real-time monitoring JMeter tests? - What are the benefits of integrating InfluxDB and Grafana into the load testing stack? - Which features are provided by Grafana? - Demonstration of InfluxDB and Grafana using a practice web application To view the webinar recording, go to: https://www.rttsweb.com/jmeter-integration-webinar

Connector Corner: Automate dynamic content and events by pushing a button

DianaGray10

Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to: Create a campaign using Mailchimp with merge tags/fields Send an interactive Slack channel message (using buttons) Have the message received by managers and peers along with a test email for review But there’s more: In a second workflow supporting the same use case, you’ll see: Your campaign sent to target colleagues for approval If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team But—if the “Reject” button is pushed, colleagues will be alerted via Slack message Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors. And... Speakers: Akshay Agnihotri, Product Manager Charlie Greenberg, Host

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

Product School

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Jeffrey Haguewood

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams. Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

Knowledge engineering: from people to machines and back

Elena Simperl

Recently uploaded (20)

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

UiPath Test Automation using UiPath Test Suite series, part 3

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

The Art of the Pitch: WordPress Relationships and Sales

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

Accelerate your Kubernetes clusters with Varnish Caching

Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...

Leading Change strategies and insights for effective change management pdf 1.pdf

When stars align: studies in data quality, knowledge graphs, and machine lear...

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

Encryption in Microsoft 365 - ExpertsLive Netherlands 2024

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

JMeter webinar - integration with InfluxDB and Grafana

Connector Corner: Automate dynamic content and events by pushing a button

De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Knowledge engineering: from people to machines and back

Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf

1. Immersive Web apps using Three.js, WebXR, Web Audio and Tensorﬂow.js Suyash Joshi Creative Technologist at Magical Interactions @suyashcjoshi

2. What is Immersive Web ? Reference : https://www.w3.org/immersive-web/

3. The Architecture

4. Manufacturer XR Device with browser Meta Quest, Quest 2, Quest Pro, Quest 3, Rift, Rift S Apple Vision Pro Microsoft HoloLens 1, HoloLens 2 HTC Vive Focus 3, Vive Elite XR, Vive, Vive Pro, Vive Pro 2 Pico Neo 3, 4, 4 Enterprise Huawei VR 3dof, VR 6dof Samsung Gear VR, Odyssey Google Cardboard, Daydream View Varjo VR-1, VR-2, VR-3 Valve Index Magic Leap Legacy WebVR only: 1, 2 Lynx XR 1 Lenovo ThinkReality VRX, ThinkReality A3 HP Reverb G2 Reference : https://wonderlandengine.com/about/webxr/

5. Making Immersive Web Apps more magical! The What The How - Low level Browser Specification / Standard The How - High level Library/Framework/Tool Intelligent Web Apps WebGPU, Webassembly (Wasm) Tensorflow.js, ONNX Runtime Web, Mediapipe, Brain.js Spatial Web Apps, Games with controllers WebXR Device API A-Frame, Unity WebGL 3D Visualizations, Games WebGL API Babylon.js, PlayCanvas, Three.js, react-three-fiber 2D Games, Physics, Art HTML Canvas API, Audio, Video elements p5.js, phaser, matter.js Immersive Audio Web Audio, Web MIDI APIs Tone.js, Howler.js

6. Web Demos 1. Web XR 2. Machine Learning on browser + Hand Tracking 3. Spatial Music

7. Thank you :) suyash@magicalinteractions.com

Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf

Recommended

Recommended

More Related Content

Similar to Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf

Similar to Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf (20)

More from Suyash Joshi

More from Suyash Joshi (8)

Recently uploaded

Recently uploaded (20)

Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf