Three.jsとWebGL、Webブラウザで3Dアートを創る：平面を超えた表現の探求

p5.js の draw() ループの中で、私たちは座標と色彩を操り、二次元のキャンバスに秩序と混沌を描き出してきました。line() で繋がりを、ellipse() で存在を、noise() で生命の揺らぎを表現する日々。しかし、もしそのキャンバスに「奥行き」が生まれたなら、私たちの創造性はどこへ向かうのでしょうか。平面という制約から解き放たれたとき、コードはどのような風景を描き始めるのでしょう。この記事は、Three.js と WebGL という羅針盤を手に、Webブラウザという広大な海へ、三次元表現の航海に出るための、ささやかな海図です。

Webにおける3D表現の夜明け：なぜ今、Three.jsとWebGLなのか

かつて、Webブラウザ上でリッチなグラフィックスを表現するには、特別なプラグインの力を借りるのが一般的でした。しかし、時代は移ろい、Web標準技術そのものが驚くべき進化を遂げました。その中心にあるのが、GPUの能力をブラウザから直接引き出すためのAPI、WebGL です。これにより、私たちは特別な環境構築をユーザーに強いることなく、複雑な 3Dグラフィックス を届けられるようになりました。

p5.jsにも WEBGL モードが存在し、3Dのプリミティブを扱うことができます。これは2Dの表現に慣れ親しんだ私たちにとって、三次元への素晴らしい入り口です。しかし、より複雑なライティング、高度なマテリアル（質感）、そして大規模なシーンを構築しようとすると、より専門的なライブラリが必要になります。

そこで登場するのが Three.js です。これは、複雑怪奇なWebGLのAPIを、私たちクリエイターが直感的に扱えるように抽象化してくれるJavaScriptライブラリです。膨大な数の公式サンプル、活発なコミュニティ、そして何よりその柔軟性の高さから、Webアート やインタラクティブなコンテンツ制作の現場で、事実上の標準としての地位を確立しています。p5.jsが2Dスケッチの思考を整理してくれたように、Three.jsは3D空間の構築における思考の骨格を与えてくれるのです。

WebGLの基盤：ピクセルと頂点が織りなす深遠な宇宙

Three.jsという船について語る前に、それが浮かぶ海、WebGLについて少しだけ深く潜ってみましょう。WebGLは、グラフィックスカード（GPU）と直接対話するための低レベルAPIです。これはOpenGL ES 2.0をベースにしており、Webブラウザ上でハードウェアアクセラレーションを効かせた高速な描画を可能にします。

WebGLの核心は「シェーダー」と呼ばれる小さなプログラムにあります。主に2つのシェーダーが連携して、画面上のピクセルを描き出します。

1. 頂点シェーダー (Vertex Shader): 3Dモデルを構成する個々の頂点 (vertex) の位置を計算します。オブジェクトをどこに、どのように変形させて配置するかを決定する、空間の建築家です。
2. フラグメントシェーダー (Fragment Shader): 画面に描画される個々のピクセル (fragment、または pixel) の色を決定します。光がどのように当たり、表面がどのような色や質感を持つかを計算する、光と色彩の画家です。

p5.jsの loadShader() を使ったことがある方なら、その片鱗に触れているかもしれません。WebGLを直接記述することは、これらのシェーダー言語 (GLSL) を用いて、ピクセルと頂点が織りなす深遠な宇宙の法則を自ら記述する行為に他なりません。それは非常にパワフルですが、同時に膨大な知識を要求します。Three.jsは、この複雑なプロセスを「マテリアル」や「ライト」といった、より人間が理解しやすい概念へと翻訳してくれる、優れた通訳者なのです。

Three.jsが拓く創造の地平：コードで構築する仮想世界の詩学

Three.jsで3D空間を構築する際、私たちは3つの基本的な要素を準備することから始めます。それは、p5.jsにおける createCanvas() のように、私たちの創作活動の舞台を整える儀式とも言えます。

• シーン (Scene): すべてのオブジェクト、ライト、カメラを配置するための、無限に広がる仮想空間そのものです。new THREE.Scene() は、これから始まる物語のための何もない舞台を用意する一文です。
• カメラ (Camera): シーンの中のどの視点から世界を眺めるかを定義します。遠近感を表現する PerspectiveCamera や、平行投影で描画する OrthographicCamera などがあり、鑑賞者の眼差しをコードで記述します。
• レンダラー (Renderer): シーンとカメラの情報を受け取り、それをブラウザのCanvas要素に実際に描画する役割を担います。WebGLRenderer は、舞台上の光景をスクリーンに映し出す、魔法の映写機です。

この三位一体の構造が、Three.jsにおける世界の基本です。この舞台の上に、私たちは「ジオメトリ（形状）」と「マテリアル（質感）」を組み合わせた「メッシュ (Mesh)」というオブジェクトを配置し、さらに「ライト (Light)」で照らすことで、生命感のあるシーンを創造していきます。コードの一行一行が、世界の成り立ちを定義する詩的な記述へと変わる瞬間です。

実践への扉：Three.jsで始める3Dクリエイティブコーディングの第一歩

理論の海を漂うだけでは、創造の岸辺にはたどり着けません。幸いなことに、Three.jsには最初の一歩を踏み出すための優れたリソースが豊富に存在します。公式ウェブサイトに掲載されている膨大な数のサンプルは、インスピレーションの宝庫であり、具体的な実装方法を学ぶための生きた教科書です。

p5.jsでの setup() と draw() の関係に慣れているなら、Three.jsの構造もすぐに理解できるはずです。初期設定を行い、requestAnimationFrame() を使ったアニメーションループの中でオブジェクトを更新し、レンダラーで描画を繰り返す。この基本的な流れは、クリエイティブコーディング の普遍的な作法と言えるでしょう。

ここに、回転する立方体を描画する最もシンプルなコードを示します。

// シーン、カメラ、レンダラーの準備
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 立方体の作成 (ジオメトリ + マテリアル)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// アニメーションループ (p5.jsのdraw()に相当)
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

この短いコードの中に、シーン、カメラ、レンダラー、そしてオブジェクトの生成とアニメーションという、Three.jsの基本がすべて詰まっています。まずは公式ドキュメントを傍らに、このシンプルな立方体を自身のローカル環境で動かしてみることから、あなたの3D表現の旅は始まります。

鑑賞体験の拡張：Web 3Dアートの現在地と、その先の未来

Three.jsとWebGLがもたらしたのは、単に技術的な進歩だけではありません。それは、Webにおけるアートの鑑賞体験そのものを根底から変容させる可能性を秘めています。もはやWebサイトは、情報を直線的に消費するだけの場ではなくなりました。スクロールやクリックに応じて展開するインタラクティブな3D空間は、鑑賞者を物語の登場人物へと変えます。

Active Theoryのようなスタジオが手掛けるプロモーションサイトや、Marpiといったアーティストによる有機的なWebアート作品は、ブラウザが没入感のある体験を提供できる表現媒体であることを証明しています。また、オンラインのバーチャル展示空間では、世界中の人々がアバターとなって同じ空間を共有し、時間と場所の制約を超えてアートと対話することが可能になりつつあります。

これらの作品において、鑑賞者はもはや静的な絵画を眺めるだけの存在ではありません。自らの意思で空間を歩き回り、視点を変え、オブジェクトに触れることで、作品の一部となるのです。2Dのキャンバスが鑑賞者との「対面の関係」を築くとすれば、3D空間は鑑賞者を「包み込む関係」へと誘います。この体験の質の変化こそが、Web 3Dアート の最も刺激的な側面なのです。

創造のその先へ：無限の可能性を秘めたWeb 3D表現との対話

p5.jsで培った、アルゴリズムを用いて形や動きを生み出すジェネラティブな思考は、三次元という広大なキャンバスを得ることで、さらにその真価を発揮します。noise() で生成したパーリンノイズを地形の起伏に適用したり、物理エンジン (Cannon.jsなど) を組み合わせてオブジェクトのリアルな挙動をシミュレートしたり、あるいはGLSLシェーダーを深く探求し、独自の映像表現をピクセルレベルから創造したりと、可能性は無限に広がっています。

2Dから3Dへの移行は、単にZ軸という次元を追加する作業ではありません。それは、空間、時間、そして鑑賞者とのインタラクションに対する私たちの認識そのものを再構築する、内省的なプロセスです。これまで平面上で描いてきた点と線が、奥行きのある世界でどのような意味を持つのか。光と影は、私たちのコードが生み出したオブジェクトにどのような感情を与えるのか。

Three.jsは、その問いへの答えを見つけるための強力なツールであり、同時に私たち自身との対話を促す鏡でもあります。この静かなる招待状を手に、あなた自身の内なる世界を、Webブラウザという新たな次元に解き放ってみてはいかがでしょうか。