イベントは、21時10分から開始します

VRChatグループのリンクから

Discordサーバー「ぺら家」にご参加ください

ご確認事項

音量設定


音声はVRChat内で解説をしていきます！
声が聞こえるよう移動&音量の設定お願いします。

Discord

VRChat


Discordでも画面の共有しながら進めます。 画面が見づらいなどがある方はDiscordの画面共有をご覧くだださい。

それでは進めていきましょう！

オープニング

自己紹介

ぺら (@peraperavrc)

元々PlayCanvasの日本コミュニティ立ち上げやテクニカルサポートなどもやっておりました。PlayCanvasは5年ほど経験があります。現在は趣味としてPlayCanvasを利用しています。

2021年からVRChatを始め、現在はWebエンジニアとして、Webと3Dを組み合わせた制作を楽しんでいます。

モデリングは趣味程度ですが、定期的にVRChatワールドを作成しています。

🌟 PlayCanvas + Galbi SDKで遊んでみよう！

ウェブブラウザで動くゲームエンジン「PlayCanvas」と「Galbi SDK」を使って複数人でVRChatワールドを作るハンズオンです。

📅 日時: 2025年3月22日(土) 21:00〜22:30
📍 場所: VRChat

少人数でのワークショップなので気軽にご参加ください！
質問などがあればその場で行っていただいて大丈夫です！

タイムテーブル

時間 内容
21:00-21:10 インスタンス 開場
21:10-21:30 • オープニング
• PlayCanvasの紹介
• Galbi SDKの紹介
21:30-22:30 みんなでワールドを作成しよう！

運営メンバー

ぺら (@peraperavrc)
PlayCanvas担当

Acryl_ai (@vircre01)
PlayCanvas担当

sawa_zen (@sawa_zen)
会場・VRChat

にっし (@nisshi_dev)
会場・VRChat

不明点があれば、お気軽に運営メンバーにお声がけください

ハンズオンの内容

「PlayCanvas」を
基礎から触ってみる

同時編集でワールドを
リアルタイムで作る

開発環境の準備

パソコン
(Windows/Mac)

Webブラウザ
(Chrome推奨)

マウス
(あれば便利)

PlayCanvas
アカウント

これからPlayCanvasアカウントの準備を進めます

PlayCanvasについて

PlayCanvasエディターについて

PlayCanvasエディターは開発から公開までをサポートする統合開発環境です

  • 3Dモデルのインポート
  • バージョン管理機能
  • コーディング機能
  • 複数人での共同開発

ブラウザ上で完結するWebGLベースの3D開発環境です

3Dモデル

PlayCanvasエディターでは3Dモデルを簡単にインポートできます。
glTFモデルの場合、設定も自動的に適用されます。

  • ヒエラルキー / マテリアル
  • アニメーション / カメラ / Draco圧縮

対応フォーマット:

.fbx .dae .obj .3ds .glb

テクスチャ

PlayCanvasエディターに画像を追加するとテクスチャとして利用できます

対応フォーマット:

.png, .jpg, .jpeg, .gif, .bmp, .tga, .tif, .tiff, .webp

PlayCanvasアカウント作成

Discord「#イベント参加者」をご確認ください

PlayCanvasアカウントの登録方法

  1. PlayCanvas 公式サイト からアカウント登録
    ※ ⚠️「Full Name」と「Username」はどちらも公開情報になります。ニックネームの設定をお勧めします。⚠️
  2. Discordの「⁠イベント参加者」チャンネルで、PlayCanvasのusernameを共有
  3. 運営メンバーがハンズオン用プロジェクトに招待します

PlayCanvasプロジェクトへのアクセス

プロジェクト内に自分のアカウントがあるか確認してください

https://playcanvas.com/project/1316303

  1. 自分のアカウントがあるか確認
  2. 無い場合はお声がけください

PlayCanvasの基本操作

PlayCanvasエディターの基本操作

これから以下の手順でPlayCanvasエディターを開き、基本操作を学びます

  1. プロジェクトへのアクセス方法
  2. ハンズオン用シーンの選択
  3. エディター画面の確認

それでは始めましょう！

PlayCanvasプロジェクトを開く

PlayCanvasプロジェクトを開きましょう

  1. プロジェクトURLにアクセス https://playcanvas.com/project/1316303
  2. 右上の「EDITOR」ボタンをクリック
  3. シーン選択画面が表示されます

↑ EDITORボタンをクリック

ハンズオン用シーンの選択

エディター起動後、シーン選択画面が表示されます

  1. 「ハンズオン用シーン」を選択

PlayCanvasエディターが開かれます

PlayCanvasエディターの構成

エディター主な機能:

  • メニュー: ギズモの変更
  • ヒエラルキー: エンティティ一覧/管理
  • インスペクター: サイズや回転の変更
  • シーン: 3Dビュー
  • アセット: モデル/スクリプト等の管理

PlayCanvasエディターを触ってみよう

  • 基本操作を学びましょう
  • 実際に手を動かして覚えていきましょう

シーンに3Dモデルを配置してみよう！

ヒエラルキーに自分の名前のヒエラルキーがあるので、そこに
ビジュアルエディターでアセットを配置してみましょう。

  1. アセット内の「アボカド」データを選択
  2. ※「ひし形」アイコンのアセットをドラッグ&ドロップ

マテリアルを変更してみよう

ヒエラルキーから3Dモデルを選択してマテリアルを編集できます。
変更はリアルタイムで反映されます！

  1. ヒエラルキーからアボカドモデルを選択
  2. マテリアルのプロパティを確認
  3. DIFFUSE（Albedo）などを変更

PlayCanvasの共同編集でリアルタイムにマテリアルを変更できます

オリジナルのアボカドを作ってみよう！

マテリアルの作成と適用方法

  1. アセット欄から「ワークショップ」→「参加者」→「自分の名前」フォルダを開く
  2. アセット欄で右クリック「New Assets」→「Material」を選択
  3. マテリアルをオブジェクトの上にドラッグ
  4. マテリアルが適用されたことを確認

大きさや角度を変えてみよう

  1. ヒエラルキーからアボカドを選択
  2. インスペクターでサイズや位置を調整
    • Position: X, Y, Z の値を変更
    • Rotation: 回転角度の調整
    • Scale: サイズの変更
  3. 変更はリアルタイムで反映されます

インスペクターでの設定変更

VRChatに持ってきてみよう

Galbi SDKでの読み込み方法

このプロジェクトにはGalbi SDKのスクリプトが入っています。

  1. PlayCanvasプロジェクトを起動
  2. 「ログインをしないで利用」を選択
  3. 「URLを生成」ボタンでURLをコピー
  4. 「同期する」をクリック

Galbi SDKでの操作例

VRChatでの読み込み方法

  1. VRChatで「Galbi Project」ワールドに入る
  2. コピーしたURLを貼り付け
  3. 読み込み完了後、PlayCanvasで作成したコンテンツが表示されます

VRChatでのURL読み込み画面

休憩 & 質問タイム（5分程度）

息抜きがてらスクリプティングについて説明

PlayCanvasのスクリプトについて

PlayCanvasではJavaScriptでインタラクティブな機能を実装できます。

  • エンティティに対してスクリプトをアタッチ利用できます。
  • スクリプトはJavaScriptで記述します

PlayCanvasのスクリプトエディタ

アセットストア

PlayCanvasには無料のアセットストアがあります（Sketchfab連携あり）。

  • Asset欄の「ASSET STORE」からアクセス
  • 3Dモデル、テクスチャ、マテリアル、スクリプトなど様々なアセットが利用可能
  • 自分のプロジェクトに直接インポート可能

PlayCanvasのアセットストア

再開

お部屋を作ってみよう

  1. 概要説明
  2. PlayCanvasエディターの設定
  3. アセットのインポート方法
  4. 実践

各自の部屋を作ってみよう

壁と机を用意しているので、お好みの部屋を作りましょう！

モデルを配置した部屋の例

お部屋のテンプレートを使う

アセットの中に、壁と机を用意しています。
ヒエラルキーに追加してください。

  1. 「Assets」から「部屋を作ってみよう」フォルダを開く
  2. 「机と壁」のテンプレートをシーンビューにドラッグ＆ドロップ
  3. 空の部屋と机のセットが配置されます

基本的な部屋のテンプレート

お題

  • 机の上に3Dモデルを乗せてみよう！
  • 壁のマテリアルにテクスチャを設定してみよう
  • 独自の利用可能なモデルやテクスチャも使用OK
    （権利関係もクリアしているものでお願いします）

アセットのインポート説明後は自由に作成してください！

インポートの前の設定

PlayCanvas エディターの設定

テクスチャサイズを2の累乗(例:512×512, 1024×1024)に自動調整する機能を有効化

  • 左下の⚙️アイコンをクリック
  • 「SETTINGS」>「ASSET TASKS」を選択
  • 「Textures POT (Power of Two)」をオンに設定

テクスチャ設定画面

アセットのインポートについて

  1. 3Dモデルデータ
  2. テクスチャデータ

3Dモデルデータ

  • アップロード後、モデルがアセットとして表示
  • モデルをシーンビューにドラッグして配置

対応フォーマット:

  • .fbx .dae .obj .3ds .glb
このプロジェクトはパブリックなので誰でも・利用・閲覧・ダウンロード可能です。
アップロードするデータは事前にライセンスをご確認ください。

テクスチャ

PlayCanvasエディターに画像を追加してテクスチャとして利用できます。

対応フォーマット:

.png, .jpg, .jpeg, .gif, .bmp, .tga, .tif, .tiff, .webp

このプロジェクトはパブリックなので誰でも・利用・閲覧・ダウンロード可能です。
アップロードするデータは事前にライセンスをご確認ください。

テクスチャをインポートした後の設定

VRChatで読み込めるようテクスチャを変換する必要があります。
以下の手順で行いましょう：

  1. テクスチャアセットを選択
  2. 「Inspector」パネルで
    • 「LEGACY」をチェック
    • 「DXT」をチェック
  3. 「COMPRESS LEGACY」をクリック

お題（おさらい）

  • 机の上に3Dモデルを乗せてみよう！
  • 壁のマテリアルにテクスチャを設定してみよう
  • 独自の利用可能なモデルやテクスチャがあれば使用OK

実際に自分も手を動かしてやっていきます。

~ 作業時間 ~

質問などがあればお聞きください

お疲れ様でした！

写真撮影に移りましょう！

VRChatのワールドとして

アップロードするには？

glTF形式でのエクスポート

  1. PlayCanvasエディター上部の「Export」ボタンをクリック
  2. glTF (.glb) 形式を選択
  3. ファイルがダウンロードされる

Unity向けの最終変換（オプション）

  1. glTFファイルをBlenderで開く
  2. 「ファイル」>「エクスポート」>「FBX (.fbx)」を選択
  3. FBXファイルをUnityプロジェクトにインポート
  4. VRChatワールドとしての最終調整を行う

お疲れ様でした！

写真撮影に移りましょう！