ReactThreeFiberというReactで3D表現ができる神ライブラリ
はじめに
Webページは長い間、2Dの世界で制限されてきました。
しかし、これに終止符を打ったのがWebGLの導入です。導入されたのは2011年あたりでしょうか。
Khronosという非営利団体からAPIの設計がされており、OpenGLというほとんどのOSが使えるCGライブラリを扱えるAPIをWebから呼び出せるというものです。
この進化により、毎年多くの3DWebの表現が発表され続け、今では一般的になりつつあります。
見たほうが早いのでいくつかWebGLが使われたサイトを紹介します。
とても綺麗だし、面白いですね！
WebGLの敷居の高さ
なら全部3DのWebサイトでいいじゃん！！
そう思いましたよね。
ここで問題があります。
実はWebGLは難しく言語がGLSL言語というシェーダー言語を扱い、CやC+に似た構文になっているのと。一般的なCPUプログラミングとは考え方が大きく違います。これは組み込み系のエンジニアならまだしもWeb系のエンジニアにはあまり触る機会のない言語に近く、文献もかなり少ないので学習難易度が非常に高いです。
求める描画をするために、シェーダプログラミングとよばれる困難な言語(GLSL言語)理解が必要です。
試しにHelloWorldレベルのGLSL言語を紹介します。
#version 300 es
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
void main(){
vec2 pos = gl_FragCoord.xy / u_resolution.xy;
fragColor = vec4(1.0, pos, 1.0);
}
これは簡単なグラデーションをもつGLSLですが、
GLSLのフラグメントの考え方、ビューポートやベクトル、極座標や微分など、言語だけでなく、
その言語内で複雑な思考と計算が必要です。それをAPIを通じてCanvasに描画したりなど、そのまま利用しようとすると大変です。※むしろAPIを書く方が面倒かもしれないくらい大変です。
Three.jsの登場
Three.jsは、このGLSLとAPI呼び出し手順をJavascript上から直感的に扱えてるようにしたOSSライブラリで、
汎用的な形状や色などは数行描くだけで追加ができてしまいます。
Javascriptはフロントエンドエンジニアがなら仕事ではほぼ使ったことがある言語なので、
より直感的に3D表現を行うことができます。
ReactThreeFiberの登場
では、今回紹介するReactThreeFiberとは何か。※よくR3Fと略されます。
実際のフロントエンドの現場では、あまりバニラのJavascriptの利用をすることは少ないかと思います。最もシェアが高いフレームワーク、それはReactです。このReactのComponentベースでThree.jsを扱えるようにしたのがReactThreeFiberです。ReactThreeFiberは、コンポネントベースになっているので、Three.jsよりさらに直感的に3D描画を行うことが出来ます。
ここで面白いReactThreeFiberのWeb表現をいくつか紹介します。
Examplesページ
いかがでしょうか。
これらはCodeSandBoxで紹介できる程度のコード量で実現できてしまいます。
私が現在作成しているポートフォリオサイトもReactThreeFiberを使用しています。
Reactとインタラクティブに紐づいているので、クリック動作で色を変えたり動作させたりというのが非常に簡単に行えます。
私のContact画面もReactThreeFiberで書いており、とてもかわいく作れます。
ReactThreeFiberの魅力
私がR3Fの好きなところは、短く美しくかけるところです。
Reactのそもそものコンポネント設計が再利用しやすいこともあり、
他者が作ったリソースを１行追加するだけで素晴らしい表現ができたりします。
特にDreiとよばれるR3Fのリソースは、
非常に素晴らしく、ある程度のものはこのリソースを使うだけで実現できます。
私のHelloWorld的なコードサンプルを１つ記述します。
React18を使ってくださいね。
npm i @react-three/fiber @react-three/drei
# yarn add @react-three/fiber @react-three/drei
表示コンポネント
import React, { useState } from 'react'
import { OrbitControls, Environment } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
export function App() {
return (
<Canvas>
<OrbitControls />
<Scene />
<pointLight position={[10, 10, 10]} />
<Environment preset="sunset" blur={0.7} background />
</Canvas>
)
}
const Scene = () => {
const [color, setColor] = useState<string>('hotpink')
return (
<mesh
onClick={() => {
color === 'hotpink' ? setColor('orange') : setColor('hotpink')
}}>
<boxGeometry />
<meshStandardMaterial color={color} />
</mesh>
)
}
実行結果
CodeSandBox
まとめ
いかがだったでしょうか。
まだまだ日本ではReactThreeFiberユーザーが少なく感じています。
ぜひ一度触ってみてください。とても楽しいライブラリでWeb表現の幅もぐんと広がるかと思います。
私は定期的にDiscordで”ReactThreeFiber勉強会”をやっています。
また、今後このZennでも積極的にR3Fの魅力を発信していければいいなと思っていますので、興味がありましたらまた私の記事を見てくださるとうれしいです。
一緒に3D表現をする方が増えることを願って、乾杯
Discussion