-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPixi3DJ.txt
248 lines (206 loc) · 16.2 KB
/
Pixi3DJ.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
■■Pixi3D
Pixi3Dは、Web上で3Dグラフィックスを簡単にレンダリング出来るJavaScriptライブラリです。
デスクトップとモバイルの両方のWebブラウザーで機能し、
すぐに使用出来る見栄えの良い3Dシーンを簡単に作成出来る幾つかのコンポーネントが含まれています。
・ファイル（glTF）からモデルをロードするか、手続き型生成メッシュを作成します
・物理ベースレンダリング（PBR）とイメージベースドライティング（IBL）
・変換、モーフィング、スケルタルアニメーション
・カスタマイズされたマテリアルとシェーダー
・PixiJSの上に構築され、2Dアプリケーションとのシームレスな統合
■Getting started、はじめに
回転する立方体をレンダリングする簡単なアプリケーションを作成しましょう。
Pixi3Dの最新バージョンを入手する事から始めます。
また、Pixi3Dを使用する為に必要なPixiJS（v5.3+）の最新バージョンを入手して下さい。
次に、次の内容のファイルapp.jsを作成します。
---------------------------------------------------------------------
let app = new PIXI.Application({
backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)
let mesh = app.stage.addChild(PIXI3D.Mesh3D.createCube())
PIXI3D.LightingEnvironment.main.lights.push(
Object.assign(new PIXI3D.Light(), { x: -1, z: 3 }))
let rotation = 0
app.ticker.add(() => {
mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0)
})
---------------------------------------------------------------------
次に、index.htmlを作成し、必要なスクリプトを含めます。
---------------------------------------------------------------------
<!doctype html>
<html lang="en">
<body>
<script type="text/javascript" src="pixi.js"></script>
<script type="text/javascript" src="pixi3d.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
---------------------------------------------------------------------
■Install with npm、npmでのインストール
Pixi3Dはnpmパッケージとしても利用出来ます。最新リリースをインストールするには、次のコマンドを実行します。
---------------------------------------------------------------------
npm install pixi3d --save-dev
---------------------------------------------------------------------
これには、最新バージョンのNode.jsが既にインストールされている必要があります。
■Examples、例
ソースコードには、Pixi3Dのさまざまな機能の幾つかを使用する方法を示す例のコレクションが含まれています。
例を実行出来るようにするには、https://github.com/jnsmalm/pixi3dからリポジトリをダウンロードまたは複製し、
npm installを実行します。
examples/srcフォルダー内の例を参照し、serveスクリプトを使用して実行します。
たとえば、入門アプリケーションを実行するには、次のようにします。
---------------------------------------------------------------------
npm run serve -- --env.example=getting-started
---------------------------------------------------------------------
serveスクリプトは、追加のセットアップを行わずにPixi3Dを試す為にも使用出来ます。
examplesフォルダーに新しいファイル（testing-feature.js）を作成し、serveスクリプトで実行するだけです。
---------------------------------------------------------------------
npm run serve -- --env.example=testing-feature
---------------------------------------------------------------------
npm run serve -- --env.example=color-material
npm run serve -- --env.example=lighting
npm run serve -- --env.example=mesh-geometry
npm run serve -- --env.example=mesh-interact
npm run serve -- --env.example=model-viewer
npm run serve -- --env.example=pbr
npm run serve -- --env.example=quick-guide
npm run serve -- --env.example=water-effect
■Quick guide、クイックガイド
Pixi3Dの全体的な目標は、Web上で3Dグラフィックスを簡単にレンダリングで出来るようにする事です。
これは、確立された2DレンダリングライブラリであるPixiJSの上に構築されています。
Pixi3Dは、PixiJSを使用して既に慣れ親しんでいる生産的な開発者を対象としていますが、
PixiJSの予備知識がなくても簡単に始める事が出来ます。
PixiJSには、インタラクティブなグラフィックを多用するアプリケーションの作成を容易にする多くの機能が含まれています。
例：アセットの読み込み、シーングラフの管理、ユーザー操作の処理。
Pixi3DはPixiJSの上に構築されている為、これらの機能は全てPixi3Dでも利用出来ます。
https://www.pixijs.comでPixiJSの詳細をご覧下さい。
https://pixi3d.org/demo/drone/にアクセスして、このガイドで作成されたシーンのリアルタイムデモを表示します。
ソースコードはexamples / src / quick-guide.jsにあり、使用されるアセットはexamples / assetsフォルダーにあります。
■Creating an application、アプリケーションの作成
開始する最も簡単な方法は、PixiJSアプリケーションオブジェクトを作成する事です。
アプリケーションオブジェクトはレンダラーを作成し、レンダリングループを自動的に開始します。
また、HTMLドキュメントに追加する必要のあるcanvas要素も作成します。
---------------------------------------------------------------------
let app = new PIXI.Application({
backgroundColor: 0x555555, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)
---------------------------------------------------------------------
アプリケーションを作成し、canvas要素を追加すると、背景が濃い灰色の空のページになります。
■Loading a 3D model
モデルには、メッシュと呼ばれる3Dオブジェクトの階層が含まれています。
メッシュには、そのオブジェクトのレンダリングに使用されるジオメトリとマテリアルが含まれています。
モデルは通常、MayaやBlenderなどの3Dモデリングツールで作成されたファイルからロードされます。
Pixi3Dは、glTF2.0ファイル形式を使用したモデルのロードをサポートしています。
glTF（GL Transmission Format）は、アプリケーションによる3Dシーンとモデルの効率的な送信と読み込みの為のロイヤリティフリーの仕様です。
glTFは、3Dアセットのサイズと、それらのアセットを解凍して使用するために必要なランタイム処理の両方を最小限に抑えます。
glTFは、オーサリングワークフローを合理化し、業界全体でコンテンツの相互運用可能な使用を可能にする、
3Dコンテンツツールおよびサービスの拡張可能な共通の公開形式を定義します。
glTFの詳細については、https://www.khronos.org/gltf/をご覧下さい。
テストの目的で、より迅速に開始するために、glTF2.0サンプルモデルはhttps://github.com/KhronosGroup/glTF-Sample-Modelsにあります。
このガイドで使用されている特定のモデルは、Sketchfabからダウンロードされました。
ライセンス：クリエイティブ・コモンズ表示-非営利
---------------------------------------------------------------------
app.loader.add("assets/buster_drone/scene.gltf")
app.loader.load((loader, resources) => {
let model = app.stage.addChild(
PIXI3D.Model.from(resources["assets/buster_drone/scene.gltf"].gltf))
})
---------------------------------------------------------------------
glTF 2.0ファイルをロードし、モデルを作成します。ドローンのシルエットが現れるはずです。
今のところ、照明が無い為、黒にレンダリングされます。
■Position, rotation and scale、位置、回転、スケール
シーン内のすべてのオブジェクトには、そのオブジェクトの位置、回転、およびスケールを設定する為に使用される変換があります。
オブジェクトの変換は、常にその親変換に関連しています。
したがって、親オブジェクトの変換を変更すると、その子オブジェクトのすべての変換も影響を受けます。
位置とスケールの両方が、各軸に1つずつ、3つのコンポーネント（x、y、z）を持つベクトルで表されます。
回転はクォータニオンで表され、4つのコンポーネント（x、y、z、w）があります。
四元数は、回転を変更するために使用されるメソッドsetEulerAnglesがあるため、ベクトルとして使用するのは簡単ではありません。
---------------------------------------------------------------------
model.position.y = 0.3
model.scale.set(2)
model.rotationQuaternion.setEulerAngles(0, 25, 0)
---------------------------------------------------------------------
モデルをy軸の0.3に移動します。y軸で25度に回転し、すべての軸でスケーリングします。
■Lighting environment、ライティング環境
シーン内のオブジェクトを照らすにはライトが必要です。
そうでない場合、ライトは完全に黒くなります（使用されているマテリアルによって異なります）。
照明環境には、シーンの照明に使用されるさまざまなコンポーネントが含まれています。
照明環境はオブジェクト間で共有する事も、各オブジェクトに独自の環境を持たせる事も出来ます。
メインの照明環境が作成され、デフォルトで使用されます。
使用出来るライトは2種類あり、そのうちの1つがパンクチャライトです。
利用可能なパンクチャライトには幾つかの種類があります。
「ポイント」タイプは、ポイントに配置され、すべての方向に均等に光を放射するライトです。
「指向性」タイプは、無限に離れた場所にあるライトで、一方向にのみ発光します。
「スポット」タイプは、ある点に配置され、円錐形に発光するライトです。
ライトには変形があり、他のオブジェクトにアタッチ出来ます。
---------------------------------------------------------------------
let dirLight = Object.assign(new PIXI3D.Light(), {
type: "directional", intensity: 0.5, x: -4, y: 7, z: -4
})
dirLight.rotationQuaternion.setEulerAngles(45, 45, 0)
PIXI3D.LightingEnvironment.main.lights.push(dirLight)
let pointLight = Object.assign(new PIXI3D.Light(), {
type: "point", x: -1, y: 0, z: 3, range: 10, intensity: 10
})
PIXI3D.LightingEnvironment.main.lights.push(pointLight)
---------------------------------------------------------------------
メインの照明環境に指向性ライトとポイントライトを追加します。
これで、ドローンがライトで照らされるはずです。
■Playing animations、アニメーションの再生
モデルには、3Dモデリングツールで作成されたアニメーションを含める事が出来ます。
アニメーションには、骨格(スケルタル：skeletal)、モーフィング(morphing)、変形(transformation)の3種類があります。
スケルタルアニメーションは、キャラクターのアニメーションによく使用されますが、他のものをアニメーション化する為にも使用出来ます。
モーフィングは、たとえば手を振る旗を作成するために、頂点ごとにアニメーション化する為に使用されます。
変換アニメーションは、オブジェクト全体の移動、回転、スケーリングに使用されます。
---------------------------------------------------------------------
model.animations[0].play()
---------------------------------------------------------------------
モデルの最初のアニメーションの再生を開始します。
■Casting shadows、影を落とす
ライトが影を落とす事が出来るようにするには、2つの異なるコンポーネントが必要です。
1つ目は、ライトをラップしてシャドウをキャストする機能を提供するシャドウキャストライトです。
影のテクスチャのサイズや影の柔らかさなど、影の品質を制御するための複数の設定があります。
指向性ライトタイプとスポットライトタイプの両方で、シャドウのキャストがサポートされています。
必要な2番目のコンポーネントは、シャドウレンダリングパスです。
これは、シャドウキャスティングライトを使用してシャドウをレンダリングします。
シャドウレンダーパスは、標準パイプライン（デフォルトで作成および使用されます）で使用出来ます。
最後に、オブジェクトがシャドウの受信とキャストの両方を行うには、シャドウを有効にする必要があります。
---------------------------------------------------------------------
app.renderer, dirLight, 512, 15, 1, PIXI3D.ShadowQuality.medium)
let pipeline = PIXI3D.StandardPipeline.from(app.renderer)
pipeline.shadowRenderPass.lights.push(shadowCastingLight)
pipeline.shadowRenderPass.enableShadows(model, shadowCastingLight)
---------------------------------------------------------------------
シャドウキャスティングライトを作成し、シャドウレンダーパスに追加します。
また、モデルのシャドウがシャドウの受信とキャストの両方を行えるようにします。
■2D and 3D、2Dと3D
2D（PixiJS）コンテナーと3D（Pixi3D）コンテナーの合成は簡単で、さまざまな方法で組み合わせる事が出来ます。
2Dコンテナは3Dコンテナの上に追加出来、その逆も可能です。
コンテナは組み合わせる事が出来ますが、2Dと3Dで使用される変換は互いに異なる動作をし、互換性がありません。
親子関係がある場合でも、変換は相互に影響を受けません。
3D座標を2D座標に（またはその逆に）変換出来るようにするには、カメラメソッドscreenToWorldおよびworldToScreenを使用出来ます。
---------------------------------------------------------------------
let vignette = app.stage.addChild(
new PIXI.Sprite(PIXI.Texture.from("assets/vignette.png")))
app.ticker.add(() => {
Object.assign(vignette, {
width: app.renderer.width, height: app.renderer.height
})
})
---------------------------------------------------------------------
3Dシーンの上に2Dビネットレイヤーを追加して、より映画的な効果を与えます。
ビネットをレンダラーのサイズにサイズ変更します。
■Controlling the camera、カメラのコントロール
カメラは、3Dシーンがレンダリングされる位置と方向を制御する為に使用され、ビューを変更する為に使用される位置と回転があります。
変換を持つ他のオブジェクトと同様に、別のオブジェクトにアタッチ出来ます。
カメラは、マウスまたはトラックパッドを使用して直接制御する事も出来ます。
メインカメラはデフォルトで作成され、使用されます。
---------------------------------------------------------------------
let control = new PIXI3D.CameraOrbitControl(app.view)
---------------------------------------------------------------------
マウス/トラックパッドを使用して、ユーザーがメインカメラを軌道制御出来るようにします。
マウスの左ボタンを押したまま軌道にドラッグし、スクロールホイールを使用してズームイン/ズームアウトします。
■API、API
APIドキュメントはhttps://api.pixi3d.orgで入手出来ます。
■Building、ビルド
pixi3d.jsを本番環境の設定でdistフォルダーにビルドします。