#WebXR

[takahashicleaning]

空間(によるスペイシェル)Webの最適化 - Apple Vision Pro

「イマーシブ」とは、「没入」「没入感のある」と定義されている言葉ではあります。

しかし、空間(によるスペイシェル)コンピューティング体験とは、3D映画館のスクリーンから飛び出した3D物体や3D特殊効果が自らの身体へ数センチの距離まで接近する3D表現ができるプラットフォームを実現可能にします。

2010年代に流行した3Dメガネをかけて3D映画館で見た感覚に近い感じがします（こ���場合、3DメガネがApple Vision Pro）

Web上でvisionOSの機能を最大限に活用する方法を学びましょう。

3Dイマーシブ体験がインターネットの資源と融合して使用できるようになります。

選択した対象をハイライト表示する機能の改善や、空間(によるスペイシェル)写真およびパノラマ画像をフルスクリーンで表示する機能など、最新のアップデートを紹介します。

既存のWeb標準を利用して、WebSpeechによる音声入力やテキスト読み上げ、WebAudioによる空間(によるスペイシェル)サウンドスケープの作成、WebXRによるイマーシブな体験を実現する方法について知ることができます。

WebXRとは・・・

W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているのが、JavaScript APIによるXRの標準化仕様であるWebXRです。

他には、WebXR以前にもWebVRというVR向けの仕様がありましたが、現在はARやMRにも対応すべくWebXRの中に統合されました。

インターネットで扱うため、WebVRは、オープンソース化のためにOpenXRの方向に進んでます。

さらに、Apple Intelligenceなどのジェネレーティブ人工知能でWebサイトをアプリにする機能も拡張することで

Apple Vision ProやiPhoneへ写真も3D生成してデスクトップアプリに仕上げてくれそうなインスピレーションがきました。

Safariでのビデオ鑑賞がワイドシアターのように、どの「環境」にいても、巨大なスクリーンでSafariで表示されたビデオを楽しめます。

それはまるで映画館のように圧倒的な鑑賞体験。スクリーンに印象的な光や反射も加えました。あなたのYouTubeやNetflixなどのビデオをかつてないほど美しく、そして、大きくワイドに映し出します。

参考として・・・

イマーシブな体験は、ユーザーが物理的な世界とデジタルな世界の間で没入感を得ることを指します。

これは、視覚、聴覚、触覚、嗅覚、さらには味覚までを含むことができ、ユーザーに強い感情的なインパクトを与えることができます。

現在、イマーシブ体験はエンターテインメント業界を中心に広がっています。

例えば、VR（仮想現実）やAR（拡張現実）を利用したテーマパークやアトラクション、イマーシブシアターなどが人気です。

3D映画は、イマーシブ体験の一部として位置づけられます。3D映画は視覚的な深度を提供し、観客が映画の世界に入り込む感覚を強化します。

これにより、従来の2D映画よりも強い没入感を得ることができます。

イマーシブ体験は、エンターテインメントだけでなく、教育、医療、マップアプリ、車などの運転補助、交通標識など多岐にわたる分野で活用されています。

サードパーティー製のスマホケースのようにApple Vision Proと一体化したヘルメットもデザイン上相性が良いかもしれません。本体の重さを全体に分散します。

安全面からも普段からヘルメット着用の抵抗感もなくなります。

技術の進化とともに、ますます現実的でインタラクティブな体験が可能となり、今後もその需要は拡大していきます。

＜おすすめサイト＞

visionOSにおけるスクリーンから飛び出すインタラクティブな体験の設計 - Apple Vision Pro

WebXRによる3Dイマーシブなインターネット体験の構築 - Apple Vision Pro

実用に向けた大規模言語モデルApple インテリジェンス 2024

Apple Vision Pro 2024

ジェームス・キャメロン： 「アバター」を生み出した好奇心

[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/

[makesomethingawfuleveryday]

Doing a quick dev workshop tomorrow which I used as an excuse to finally build some very basic dumb things with A-Frame. The WebXR setup on Glitch is really top notch. Too bad the metaverse is dead (again).

[filtergrade]

Exploring 360 Studio from webXR.tools - Quickstart Guide

[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.

[codezup]

Building an Augmented Reality Experience with A-Frame

Introduction Building an Augmented Reality (AR) experience with A-Frame is a cutting-edge technique that allows developers to create immersive and interactive experiences for users. A-Frame is an open-source framework that utilizes the WebXR API to enable AR experiences on the web. With A-Frame, developers can create 3D scenes, add interactive elements, and use cameras to capture real-world…

[takahashicleaning]

WebXRによる3Dイマーシブなインターネット体験の構築 - Apple Vision Pro

「イマーシブ」とは、「没入」「没入感のある」と定義されている言葉ではあります。

しかし、空間(によるスペイシェル)コンピューティング体験とは、3D映画館のスクリーンから飛び出した3D物体や3D特殊効果が自らの身体へ数センチの距離まで接近する3D表現ができるプラットフォームを実現可能にします。

2010年代に流行した3Dメガネをかけて3D映画館で見た感覚に近い感じがします（この場合、3DメガネがApple Vision Pro）

WebXRを使用して、visionOSのWebサイトにフル3Dイマーシブ体験を追加する方法をご紹介します。

3Dイマーシブ体験がインターネットの資源と融合して使用できるようになります。

visionOSの入力機能をフルに活用するWebXRインターネット体験を構築する方法や、シミュレーターを使用してmacOS上でWebXRインターネット体験をテストする方法を説明します。

WebXRとは・・・

W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているのが、JavaScript APIによるXRの標準化仕様であるWebXRです。

他には、WebXR以前にもWebVRというVR向けの仕様がありましたが、現在はARやMRにも対応すべくWebXRの中に統合されました。

インターネットで扱うため、WebVRは、オープンソース化のためにOpenXRの方向に進んでます。

さらに、Apple Intelligenceなどのジェネレーティブ人工知能でWebサイトをアプリにする機能も拡張することで

Apple Vision ProやiPhoneへ写真も3D生成してデスクトップアプリに仕上げてくれそうなインスピレーションがきました。

Safariでのビデオ鑑賞がワイドシアターのように、どの「環境」にいても、巨大なスクリーンでSafariで表示されたビデオを楽しめます。

それはまるで映画館のように圧倒的な鑑賞体験。スクリーンに印象的な光や反射も加えました。あなたのYouTubeやNetflixなどのビデオをかつてないほど美しく、そして、大きくワイドに映し出します。

参考として・・・

イマーシブな体験は、ユーザーが物理的な世界とデジタルな世界の間で没入感を得ることを指します。

これは、視覚、聴覚、触覚、嗅覚、さらには味覚までを含むことができ、ユーザーに強い感情的なインパクトを与えることができます。

現在、イマーシブ体験はエンターテインメント業界を中心に広がっています。

例えば、VR（仮想現実）やAR（拡張現実）を利用したテーマパークやアトラクション、イマーシブシアターなどが人気です。

3D映画は、イマーシブ体験の一部として位置づけられます。3D映画は視覚的な深度を提供し、観客が映画の世界に入り込む感覚を強化します。

これにより、従来の2D映画よりも強い没入感を得ることができます。

イマーシブ体験は、エンターテインメントだけでなく、教育、医療、マップアプリ、車などの運転補助、交通標識など多岐にわたる分野で活用されています。

サードパーティー製のスマホケースのようにApple Vision Proと一体化したヘルメットもデザイン上相性が良いかもしれません。本体の重さを全体に分散します。

安全面からも普段からヘルメット着用の抵抗感もなくなります。

技術の進化とともに、ますます現実的でインタラクティブな体験が可能となり、今後もその需要は拡大していきます。

＜おすすめサイト＞

実用に向けた大規模言語モデルApple インテリジェンス 2024

Apple Vision Pro 2024

ジェームス・キャメロン： 「アバター」を生み出した好奇心

[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…

[metaverse-ar-vr]

Wolvic Chromium 1.1 adds WebXR AR support to the open-source standalone XR browser, after 1.0 added eye tracked navigation. #AR #VR #Metaverse

[simba2150]

Emerging Trends in 3D Visualization for 2023

As technology continues to advance, the field of 3D visualization is experiencing significant innovations that are set to transform various industries, from entertainment to healthcare and manufacturing. As we move into 2023, several emerging trends are pushing the boundaries of what’s possible with 3D visualization. Companies like a 3D Visualization Company in Mumbai are at the forefront of these advancements, enabling businesses to stay competitive and innovative.

Key Points

Real-Time Rendering

Real-time rendering is becoming increasingly sophisticated, allowing for instantaneous feedback and interaction with 3D models. Thanks to powerful GPUs and advanced algorithms, real-time rendering is now more accessible than ever. This enables designers, engineers, and marketers to make quicker decisions, iteratively refine their models, and provide end-users with more engaging, interactive experiences. By collaborating with a 3D Visualization Company in Mumbai, businesses can leverage real-time rendering to enhance their digital platforms.

Enhanced AI and Machine Learning Integration

Artificial Intelligence (AI) and Machine Learning (ML) are playing an essential role in advancing 3D visualization. These technologies can automate and optimize various aspects of 3D modeling, such as texture generation, lighting effects, and even animation. By leveraging AI and ML, creators can produce higher-quality visuals faster, with less manual intervention, thereby increasing productivity and creativity. Partnering with a 3D Visualization Company in Mumbai ensures that businesses can integrate the latest AI and ML trends into their visualization projects.

Augmented Reality (AR) and Virtual Reality (VR)

AR and VR technologies are continuing to mature, offering more immersive 3D visualization experiences. AR overlays digital elements onto the real world, while VR creates entirely virtual environments. In 2023, we can expect to see more sophisticated and seamless integration of AR and VR in sectors such as retail, real estate, and education. Collaborating with a 3D Visualization Company in Mumbai will allow businesses to provide users with more immersive and interactive ways to explore products and environments.

Web-Based 3D Visualization

With advancements in web technologies like WebGL and WebXR, 3D visualization is becoming more readily accessible via web browsers. This trend allows users to interact with complex 3D models without needing specialized software or hardware. Businesses can leverage web-based 3D visualization to enhance their digital platforms, enabling more widespread access and engagement. A 3D Visualization Company in Mumbai can help organizations tap into the potential of web-based tools to create seamless customer experiences.

Photorealistic Textures and Lighting

Achieving photorealism in 3D visualization has always been a significant goal. In 2023, advances in texture mapping and lighting techniques are bringing us closer to this goal. Enhanced photogrammetry and physically-based rendering (PBR) methods are making it possible to create 3D models with unprecedented detail and realism. This has profound implications for industries such as film, gaming, and e-commerce, where lifelike visuals can significantly impact user experience. By working with a 3D Visualization Company in Mumbai, brands can ensure they are utilizing the latest techniques in creating photorealistic models.

Conclusion

The landscape of 3D visualization is rapidly evolving, driven by technological advancements and increasing demand for more interactive and immersive experiences. Real-time rendering, AI integration, AR and VR, web-based visualization, photorealistic textures, cloud-based computing, interactive storytelling, and sustainable practices are set to be the defining trends in 3D visualization in 2023. By collaborating with a 3D Visualization Company in Mumbai, businesses can capitalize on these trends to enhance their digital presence and remain competitive in their respective industries.

[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