ディスプレイを越えるWebXR：クリエイティブコーディングが拓く没入型空間アート
p5.jsやThree.jsで描く世界は、なぜいつも四角いディスプレイの向こう側にあるのでしょうか。もし、その描画キャンバスが私たちを取り囲む空間そのものになったとしたら。コードによって生み出された風景の中を歩き、インタラクティブなオブジェクトに自らの手で触れることができたなら、表現と鑑賞の関係はどのように変わるのでしょう。この問いへの一つの答えが、Webブラウザ上で没入型のVR/AR体験を可能にする WebXR という技術です。本記事では、クリエイティブコーディングの新たなフロンティアとして広がるWebXRの世界を探求し、ディスプレイの枠を超えた表現を創造するための思考と、その第一歩を記します。
ディスプレイを越える視線、新たな現実への誘い
私たちは長い間、コンピュータースクリーンという窓を通して、デジタルの世界を眺めてきました。クリエイティブコーディングは、その窓の中に美しい図形や複雑なシステム、生命のような動きを描き出す試みでした。しかし、その根底には常に、鑑賞者と作品世界を隔てる一枚のガラスが存在していました。WebXRは、このガラスを取り払い、私たちを窓の向こう側へと誘う扉を開きます。
それは、単なる3D表現の延長ではありません。鑑賞者が作品の「外」から「中」へと移動するとき、そこには質的な変化が生まれます。もはや鑑賞者は、定められた視点から作品を眺める傍観者ではなく、空間を構成する要素の一つであり、作品世界に影響を与える能動的な存在となるのです。このパラダイムシフトは、私たちがコードで何を創造し、鑑賞者が何を体験するのかという、表現の根源的な問いを突きつけます。これから始まるのは、空間そのものをキャンバスとして捉え直す、新たな創造の旅です。
WebXRの現在地（2026年）：ブラウザが解き放つVR/ARの魔法
WebXRは、特定のフレームワークやライブラリの名前ではなく、WebブラウザにVR（仮想現実）とAR（拡張現実）の機能をもたらすための標準API群 (WebXR Device API) を指す総称です。W3Cで標準化されたAPI群であり、2026年の現在、多くのモダンブラウザがこのAPIをサポートしています。これにより、特別なアプリケーションをインストールすることなく、URLにアクセスするだけで、Webサイトからシームレスに没入型体験を開始できるようになりました。
この「手軽さ」こそが、WebXRの最も革新的な側面です。スタンドアロン型のVRヘッドセット（例えばMeta QuestシリーズやPICOなど）や、ARに対応した一般的なスマートフォンさえあれば、誰でもWeb上のVR/ARコンテンツに触れることができます。クリエイターにとっては、作品を届けたい相手に、OSやデバイスの壁を越えて、一つのリンクを送るだけで体験を共有できることを意味します。このアクセシビリティの高さが、WebXRを実験的なアートや個人の表現活動にとって、非常に魅力的なプラットフォームにしています。
技術的にも、WebXRは着実に成熟を重ねています。初期の視点追跡（ヘッドトラッキング）に加え、コントローラーによる入力、さらにはハンドトラッキングといった機能も標準APIで扱えるようになり、より直感的で身体的なインタラクションの設計が可能です。ARにおいては、平面や壁を認識する機能 (Plane Detection) や、空間内の特定の位置に仮想オブジェクトを固定するアンカー機能 (Anchors) によって、現実世界とデジタルコンテンツがより強固に結びついた表現が生まれています。
クリエイティブコーディングがWebXRで描く未来：空間を創造する思考
p5.jsで二次元平面に点を打ち、線を描くことから始まった私たちの旅は、WebGLモードやThree.jsによって三次元空間の奥行きを獲得しました。WebXRは、その思考をさらに拡張し、「空間を体験する」ことそのものをデザインの対象とします。これは、単に3Dモデルをシーンに配置することとは根本的に異なります。
例えば、鑑賞者の視線の動きをデータとして捉え、その軌跡からジェネラティブな彫刻をリアルタイムに生成するVRアートを想像してみてください。あるいは、部屋の壁をスマートフォンのカメラで認識させると、その壁面からコードによって生成されたデジタルな蔦が伸び、床を幾何学的な模様の花が覆っていくAR体験はどうでしょう。鑑賞者の物理的な動きや、存在する環境そのものが、作品を変化させるパラメータになるのです。
ここでの主役は、もはや美しいビジュアルだけではありません。空間のスケール感、音の反響、オブジェクトに近づいた時の触覚的なフィードバック（コントローラーの振動など）、そして鑑賞者自身の身体感覚。これらすべてが、コードによってデザインされるべき表現要素となります。クリエイティブコーディングは、ピクセルの制御から、知覚体験全体の設計へと、その領域を広げようとしています。
WebXRを実現する主要なツールとフレームワーク：A-Frame、Three.js、そしてその先
WebXRの世界に足を踏み入れるためのツールは、すでに私たちの手の届くところにあります。特にクリエイティブコーダーにとって親和性の高い、二つの主要なフレームワークが存在します。
一つは A-Frame です。Mozilla VRチーム（当時）によって開発されたこのフレームワークは、HTMLのカスタムタグを使ってVR/ARシーンを宣言的に構築できるという、際立った特徴を持っています。例えば、<a-scene> タグでシーンを定義し、<a-box> や <a-sphere> といったタグを書き加えるだけで、空間にオブジェクトを配置できます。この直感的なアプローチは、Web開発の経験があれば誰でもすぐにWebXRコンテンツを作り始められるため、最初の入口として非常に優れています。
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>もう一つは、私たちにも馴染み深い Three.js です。より柔軟でパワフルな3DグラフィックスライブラリであるThree.jsは、WebXRの機能をコアに統合しています。WebGLRenderer に簡単な設定を加えるだけで、既存のThree.jsシーンをVR/ARに対応させることができます。A-Frameが手軽なコンポーネントベースのアプローチを提供するのに対し、Three.jsはレンダリングパイプラインやインタラクションのロジックをより低レベルで制御したい場合に強力な選択肢となります。独自のシェーダーを用いた複雑なビジュアルや、物理演算と連携した高度なインタラクションを実装するなら、Three.jsがその力を発揮するでしょう。
これらの他にも、Babylon.jsといったフレームワークも活発なコミュニティを持ち、WebXR開発のための優れたツールを提供しています。どのツールを選ぶにせよ、JavaScriptという共通言語の上で、空間的な表現を探求できる環境が整っています。
WebXRアートの鑑賞体験：仮想と現実が織りなすインタラクティブな世界
技術の話から少し離れ、WebXRがもたらす鑑賞体験そのものに目を向けてみましょう。美術館の白い壁にかけられた絵画を眺めるのとは異なり、WebXRアートの鑑賞は、しばしば身体的な探検を伴います。
VR空間に構築された仮想のギャラリーでは、私たちは自分の足で歩き回り、作品に好きなだけ近づき、回り込んで裏側を覗き込むことさえできます。作品によっては、手を伸ばして触れると形や色を変えたり、音を奏でたりするものもあります。鑑賞という行為が、静的な観察から動的な対話へと変化するのです。
ARは、この体験をさらに拡張し、私たちの日常空間を展示の場に変えます。自宅のテーブルの上に、手のひらサイズの動く彫刻を出現させたり、公園の風景にデジタルな生物を重ね合わせたり。そこでは、現実の光や環境が作品の一部となり、仮想と現実が分かちがたく織り混ざった、その場限りのユニークな体験が生まれます。この体験は、もはや作品を「見る」のではなく、作品と「共存する」と呼ぶ方がふさわしいかもしれません。
制作への第一歩：WebXRで表現を始めるためのヒントと展望
この新たな表現のフロンティアに、どうすれば第一歩を踏み出せるのでしょうか。幸いなことに、そのハードルは驚くほど低くなっています。
まず必要なのは、WebXRを体験できるデバイスです。多くの人が持っているスマートフォンは、ARコンテンツを試すための最も手軽なツールです。より没入的なVR体験を求めるなら、PCに接続不要なスタンドアロン型VRヘッドセットが、数年前と比較してはるかに手頃な価格で入手できます。
次に、制作ツールとして、まずはA-Frameから始めてみることをお勧めします。HTMLファイル一つと、Webサーバー（ローカル環境で動かす簡単なもので十分です）さえあれば、すぐに空間にオブジェクトを浮かべることができます。公式ドキュメントや、オンラインエディタ（Glitchなど）に豊富なサンプルが用意されているため、コードを書き換えながら学ぶのに最適です。
p5.jsで円を一つ描くことから始めたように、WebXRでもまずは、何もない空間に立方体を一つ表示させ、その周りを歩き回ってみることから始めてください。ディスプレイの中で見ていた3Dモデルと、自分がその隣に「存在する」感覚の違い。その小さな驚きこそが、空間で表現を創造するための、最も重要な原体験となるはずです。WebXRは、まだ表現の文法が確立されていない、広大な未開の地です。だからこそ、私たちクリエイティブコーダー一人ひとりの小さな実験が、未来の表現を形作る大きな一歩となるのです。
