#WebXR

[virtualrealitynewstoday]

Apple Vision Pro 在 VisionOS 2 中預設支援 Safari WebXR

在近年來的技術發展浪潮中，虛擬實境（VR）技術日趨成熟，已逐漸從娛樂與遊戲領域擴展到各行各業。在此背景下，WebXR API 的推出標誌著一個重要里程碑，這是一項使網頁能夠支持虛擬和增強實境（即XR技術）的網絡標準。Rose Canon，一名專門從事Web標準的Safari工程師，其展示了如何利用WebXR API在網站上創建沉浸式的虛擬實境體驗。 Rose介紹了WebXR的基本概念並通過一個國際象棋遊戲來展示其實際應用。在她的示範中，用戶只需點擊一個按鈕，便可啟動一個全面的虛擬實境體驗，其中包括與計算機對弈的棋盤。 隨著最新的 VisionOS 2 更新，Apple Vision Pro 在其內建的 Safari 瀏覽器中正式支援 WebXR…

[lightarts]

Portals across worlds, one of our last talks on portal interoperability across worlds

[emselimahmed]

YouTube app for Apple Vision Pro is "on the roadmap"

[joshtechadvisory]

Code: WebVR - Building Immersive Worlds with A-Frame

Join us as we embark on a journey through the fundamentals of WebVR and A-Frame, catering to both beginners and experienced developers alike. Through easy-to-follow tutorials, demonstrations, and practical examples, we empower you to bring your ideas to life and unlock the endless possibilities of virtual reality right from your web browser.

Read More : https://joshsoftware.com/josh-software-events/prose-code/

[filtergrade]

Exploring 360 Studio from webXR.tools - Quickstart Guide

[rannsolve]

Top 7 Predominant Metaverse Tools and Frameworks

What is Metaverse?

Metaverse, in general, is a place for people to engage and interact virtually using 3D network technology. The connections may be both social and business-oriented through their virtual avatars. They can also be called the virtual reality of the modern internet. 

As the Metaverse branches into various sectors, there’s an imminent need for several tools and platforms to help coders develop it. 

In this article, we will give an insight on top open-source Metaverse tools that minimize your tasks and helps coders to develop with different features. 

Below mentioned are the top pick open-source Metaverse tools and platforms: 

Webaverse

XREngine

HyperCube

WebXR Device API

JanusWeb

Blender

Open Metaverse Interoperability Group

Webaverse:

One of the most loved open-source metaverse tools is Webaverse. Webaverse allows coders to build an independent Metaverse-Engine to build a Metaverse. Webaverse stated the mission is to shift the power of the big companies to creators and users. With a Metaverse Engine from Webaverse, the foundation is perfect for the Metaverse. One intended requirement is Nodejs 17 or later available. 

XREngine:

Metaverse can be made in a few simple clicks or with as much low-level coding as possible. The XREngine is used to focus on the beginners to make Metaverse development effortlessly. 

HyperCube:

Metaverse hosting is the first and foremost step in building a Metaverse, and this is where the importance of a decentralized Metaverse platform comes into the frame. 

Coders, who are in the arena to develop a decentralized platform, can opt for HyperCube. HyperCube follows blockchain technology, creating an ‘extended reality’ environment called HyperVerse, which could be considered a form of Metaverse. 

WebXR Device API:

Direct access to the hardware devices is essential during the development of the Metaverse platform. WebXR Device API does that by simplifying the process, where developers can easily access virtual and augmented reality from the web applications through a standardized approach. 

JanusWeb:

JanusWeb is yet another open-source developer-friendly network programming framework focused on creating 3D environments that can run seamlessly on browsers. Their power is rendered from Three.js or WebGL. If your goal is focused on the 3D platform, then JanusWeb should top your list. 

Blender:  

Metaverse may be the current buzzword, but Blender has been in the market for longer, much before anyone knows about Metaverse. Blender is one of the best open-source solution providers, where it provides solutions for the creation and manipulation of 3D visualizations and testing of 3D Metaverse apps. 

Open Metaverse Interoperability Group:

Open Metaverse Interoperability Group (OMI) helps you to stay up-to-date with the resources used to build Metaverse applications. This mission is to create open standards that easily integrate metaverse apps, services, and platforms. 

Summing it up:

It’s time to bring some revolutionary changes, starting with the experiences you could get with the modern tools to shift the paradigms. Of course, building Metaverse doesn’t happen overnight. But with the tools mentioned above and appropriate frameworks, you could quickly build one that best suits your type of business. 

To know more about Metaverse developments or associate with us, please visit https://www.rannsolve.com/.

[theanine3d]

Mozilla Hubs shutting down

Some very unfortunate news was announced yesterday by Mozilla. As part of the efforts of the new CEO, Mozilla will be downsizing and refocusing the company's efforts on Firefox and AI. The Hubs team is unfortunately one of the teams at Mozilla now slated to lose their jobs.

If you're familiar with my work, you'll know that I've depended on Mozilla Hubs for many of my projects these past 5 years. I've been creating on the platform since it first became available to the public. Hubs has been my favorite content creation platform to date. It's got the easiest workflow for 3D artists that use Blender, thanks to its dedicated (and very powerful) Blender addon. No other social 3D / VR / webXR platform has come close to Hubs in terms of ease of use, flexibility, and artist-friendliness for me. It truly is a special piece of tech. I even used it with great success last year to showcase artwork created by my 3D art students, a gallery that will now be going offline as well.

Because of all that, news of it shutting down has hit me pretty hard. A lot of my publicly available online VR worlds are now slated to disappear in the near future. Although Hubs is open source and its code will still remain available for many years to come for anyone who wants to self-host it, that just isn't possible for me. I don't make money from my VR projects (making them purely out of love for the hobby and/or source material), and I basically live paycheck to paycheck. I did attempt Patreon a few years back, but it sadly never took off.

So I guess this is my announcement that my VR worlds, too, are going to go offline within the next year. Please enjoy them while you can. 🥹

I want to end this post with a massive thank you to the Hubs team for all their effort on this wonderful platform. They not only created something magical, but they selflessly shared it openly and for free with the whole world when any other company would have nickel-and-dimed their users in every way they could. Hubs was a blast to use and create on these past 5 years for me, and the team should still feel extremely proud of what they accomplished on it.

[27gigahertz]

fuck it. I'm officially recommending at this point that if you want to do VR development you should just do it in webXR in JS/TS. whatever. browsers win.

[prateekshawebdesign]

Creating Stunning 3D Experiences with Three.js- A Step-by-Step Tutorial

Hey there, fellow web enthusiasts! If you’ve ever been fascinated by the immersive world of 3D graphics and wondered how you can create those mind-blowing experiences right in your browser, then you’re in for a treat. In this tutorial, we're diving deep into the world of Three.js, a powerful JavaScript library that simplifies the process of creating 3D experiences on the web.

Whether you're a seasoned web developer or just getting started, this step-by-step guide will walk you through everything you need to know to bring your 3D visions to life. From setting up your first scene to adding complex animations, we've got you covered.

Three.js is a game-changer in the field of web development, making it accessible for anyone to create high-quality 3D graphics without needing a degree in computer science or years of experience in 3D modeling software. This tutorial is designed to be beginner-friendly, but we'll also delve into some advanced techniques to help you push the boundaries of what’s possible.

By the end of this journey, you'll not only have a solid understanding of Three.js but also the skills to create your own stunning 3D experiences that could rival even some professional projects out there. So, grab your favorite coding tools, and let's get started on this exciting adventure!# Creating Stunning 3D Experiences with Three.js: A Step-by-Step Tutorial

Welcome to the world of 3D web development! If you're a web developer looking to create mind-blowing 3D experiences, then you’ve come to the right place. Today, we're diving into Three.js—a powerful JavaScript library that brings 3D graphics to the web. This tutorial will take you through the basics and give you the tools to create stunning 3D experiences that will captivate your audience. Let's get started!

What is Three.js?

Three.js is an open-source JavaScript library that simplifies the process of creating complex 3D graphics and animations. It sits on top of WebGL, an API for rendering 2D and 3D graphics in web browsers, making it easier to work with. With Three.js, you can create beautiful 3D scenes, animations, and interactive web experiences without needing to dive deep into the complexities of WebGL.

Why Use Three.js?

Three.js has gained popularity for several reasons:

Ease of Use: It abstracts the complexities of WebGL, making it accessible for developers.

Cross-Browser Compatibility: Three.js works seamlessly across different browsers, ensuring a consistent user experience.

Rich Documentation and Community: With a robust community and extensive documentation, finding solutions and getting support is relatively easy.

Versatility: From simple visualizations to complex 3D games, Three.js can handle it all.

Recent Advancements in Three.js

Three.js has seen several enhancements recently:

Improved Performance: Optimizations in the library have made rendering faster and more efficient.

Advanced Materials and Shaders: New materials and shaders allow for more realistic and visually appealing graphics.

WebXR Integration: Enhanced support for augmented and virtual reality experiences.

Setting Up Your Three.js Project

Before we delve into creating 3D experiences, let's set up our environment.

Step 1: Create a Project Folder

Create a new folder for your project and navigate to it in your terminal.mkdir threejs-tutorial cd threejs-tutorial

Step 2: Initialize a New Project

Initialize a new Node.js project:npm init -y

This will create a package.json file in your project directory.

Step 3: Install Three.js

Install Three.js via npm:npm install three

Step 4: Set Up Your HTML File

Create an index.html file and add the following boilerplate code:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Three.js Tutorial</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="main.js"></script> </body> </html>

Step 5: Create Your Main JavaScript File

Create a main.js file. This is where we'll write our Three.js code.

Creating Your First 3D Scene

Now that we've set up our project, let's create a basic 3D scene with a rotating cube.

Read More

[virtualrealitynewstoday]

WebXR 對 Apple Vision Pro 的新支援：引入自然輸入方式

隨著 Apple Vision Pro 的推出，WebXR 在 visionOS 平台上的應用迎來了新的發展。目前，開發者和用戶可以在 Safari 17.4 的 visionOS 1.1 版本中探索一種新的互動方式——即所謂的「瞬時指針輸入模式」，這被視為一種更自然且注重隱私保護的互動方法。 WebXR 技術使得從 WebGL 創建的三維體驗能夠轉變為直接在瀏覽器中體驗的沉浸式、空間化內容。此技術遵循由 W3C 定義的 Web 標準，是呈現沉浸式內容的一個重要選擇。 傳統上，由於 WebXR 體驗完全沉浸且完全通過 WebGL 渲染，無法使用 DOM 內容或滑鼠、觸控板等傳統二維輸入方法進行互動。因此，這要求 WebXR 需要開發一種全新的、適合空間體驗的互動模型。 visionOS…

[pulipuli]

看看網頁版全文 ⇨ 延展實境體驗清單 / Extended Reality Experience List https://blog.pulipuli.info/2024/07/extended-reality-experience-list.html 為了方便說明Meta Quest 3這種延展實境XR設備的優點，我把近期找到的有趣連結都彙整成這份列表。 To explain the advantages of the Meta Quest 3, the extended reality (XR) device, I have compiled this list of interesting links that I recently found.。 Fixed Short URL: https://l.pulipuli.info/24/xr。 ---- # babylon.js: VR並可自主移動 / VR and Autonomous Mobility。 https://rb.gy/npqos0 - VR沉浸式場景 - 可以自由移動，觀察模型 - 手勢偵測 # Plockle: VR方塊解謎 / VR Block Puzzle Game。 https://plockle.com/ - VR沉浸式場景 - 自由移動控制模型 - 手勢偵測 # ar-code: AR模型互動 / AR Interactive Models。 https://ar-code.com/tw。 - AR場景 - 可以與模型互動：縮放、旋轉 - 手勢偵測 # WebXR: AR動畫模型可互動 / AR Interactive animated Models。 https://immersiveweb.dev/。 - AR混合場景 - 動態模型，但可以跟手勢互動 - 手勢偵測 # moonrider: VR音樂節奏遊戲 / VR Music Rhythm Game。 https://moonrider.xyz/。 - VR場景 - 音樂節奏遊戲，跟節拍互動 - 左右手跟方向性，避開黃色的物件 - 很多音樂可以玩 ---- 如果還有其他推薦的內容，歡迎在下面留言分享喔！。 ---- 看看網頁版全文 ⇨ 延展實境體驗清單 / Extended Reality Experience List https://blog.pulipuli.info/2024/07/extended-reality-experience-list.html

[jaimehbb]

Pagina web la cual tiene muestras de gaussian splattings en VR

[metaverse-ar-vr]

We’ve know that Apple planned to support WebXR for quite some time, but with VisionOS 2, the company is enabling the feature for all users. WebXR allows developers to deliver cross-platform XR experiences directly from the web, with no gatekeepers t #AR #VR #Metaverse

[picklesanimationcampus]

Web Designing Course in Delhi.

Module 1: Introduction to Web Design and Animation

Overview of web design principles

Understanding the role of animation in web design

Introduction to animation tools and software (e.g., CSS animations, JavaScript libraries)

Module 2: HTML and CSS Fundamentals

Basics of HTML markup

Introduction to CSS styling

Understanding CSS animations and transitions

Module 3: Responsive Web Design

Principles of responsive design

Using media queries for responsiveness

Animating elements for different screen sizes

Module 4: Introduction to JavaScript for Web Animation

Basics of JavaScript programming

Introduction to DOM manipulation

Implementing simple animations with JavaScript

Module 5: CSS Animation Techniques

Keyframe animations with CSS

Transition effects for hover and interaction states

Using CSS libraries for advanced animations (e.g., Animate.css)

Module 6: SVG Animation

Introduction to Scalable Vector Graphics (SVG)

Animating SVG elements with CSS and JavaScript

Creating complex animations with SVG

Module 7: Interactive Web Animation

Adding interactivity with JavaScript

Animating based on user actions (e.g., clicks, scrolls)

Creating interactive storytelling experiences with animation

Module 8: Advanced Animation Techniques

Animation performance optimization

Parallax scrolling effects

Using 3D transforms for immersive animations

Module 9: Animation Libraries and Frameworks

Overview of popular animation libraries (e.g., GreenSock Animation Platform, Three.js)

Implementing animations with libraries and frameworks

Exploring pre-built animation templates and resources

Module 10: Project Work and Portfolio Development

Applying learned skills to real-world projects

Building a portfolio showcasing animated web designs

Tips for presenting and marketing your work

Module 11: User Experience (UX) and Animation

Principles of UX design in relation to animation

Enhancing user engagement through animation

Usability considerations for animated interfaces

Module 12: Future Trends in Web Animation

Exploring emerging technologies (e.g., WebAssembly, WebXR) and their impact on web animation

Industry trends and career opportunities in web animation

Module 13: Final Project and Course Conclusion

Work on a comprehensive final project that demonstrates mastery of web animation skills

Review of course highlights and key takeaways

Future learning paths and resources for continued growth in web design and animation

This course structure covers the foundational aspects of web design along with specialized skills in web animation, providing students with a comprehensive understanding of creating dynamic and engaging web experiences. Adjustments can be made based on the target audience's skill level and learning objectives.

[aminiallight]

Think this might have been me, I requested this almost a year ago when I was working on SteamVR → WebXR streaming which I never shipped Don't need it for that anymore but it will be vital for my headset drivers so thank you Valve ❤️