「tutorial」タグのついた96記事

マウスとタッチでカメラを回転させ、パノラマや一人称風に Scene を見回します。

SOG splat にシャドウ、動的リライティング、物理を組み合わせ、歩行可能な実世界スキャン空間にします。

クリック可能なホットスポットと UI アノテーション付きの Gaussian splat 製品ビューアを構築します。

空間 LOD と SOG 順序で巨大な Gaussian splat Scene をストリーミングし、大規模環境を段階的に読み込みます。

展示切り替えの間にカスタムシェーダーとポストエフェクトを挟み、Gaussian splat の彫像ギャラリーを提示します。

専用カメラで 3D プレビューをレンダリングし、インベントリアイコンやキャラクター選択パネルなどの UI 要素に表示します。

Rigidbody で連続コリジョン検出を有効にし、高速な弾がステップ間で薄いコライダーをすり抜けるのを防ぎます。

適切なパイプラインで Draco 圧縮の GLB モデルを PlayCanvas で読み込み、メッシュを小さく保ちつつレンダリングを壊しません。

パイプとスコア付きのタップ飛行を再現し、コンパクトな PlayCanvas のゲームプレイサンプルです。

カスタムGLSLシェーダーでスプライトのUVを歪め、毎フレームメッシュジオメトリを作り直さずに波打ちや膨らみの効果を作ります。

glTF の GLB ファイルをランタイムでバイナリ Asset として読み込み、得られたモデルインスタンスを PlayCanvas の Scene ヒエラルキーに追加します。

HTML と CSS の Asset をライブリロードで編集し、Scene が動いたまま HUD の変更を即座に反映します。

標準の HTML と CSS でレイヤー化した HUD とメニューを構築し、WebGL キャンバス上に合成します。

単一の Asset をオンデマンドで読み込み、Script が要求するまで未使用リソースを初期プリロード一覧から外します。

Mesh API でメッシュの頂点と色を更新し、動的な GPU 駆動ジオメトリで虹色のリボントレイルを作ります。

複数のカメラとレンダリングレイヤーを組み合わせ、1 つの PlayCanvas の Scene でスクリーン空間の UI とワールド空間の要素を混在させます。

各カメラの矩形を調整してキャンバスを分割し、ピクチャーインピクチャーや分割画面のビューポートにします。

Asteroids 風のシューターテンプレートをフォークし、マウス照準、射撃、岩のウェーブでアーケードゲームの流れを学びます。

Layout Group と子のレイアウトルールでボタンとパネルを配置し、レスポンシブな PlayCanvas の UI フローを構築します。

動的なテキスト用にノーマルマップとパララックスマップを生成し、文字が光を受けて浮き彫りのように見えるようにします。

Shadertoy風のプラズマ効果をマテリアルのシェーダーチャンクに移植し、アニメーションするGLSLがエンジンのライティングで表面色を駆動するようにします。

layout groups、Button、スプライト、アトラスでショップ画面を組み立て、アイテム一覧と購入操作をすっきり表示します。

Entityやアプリケーションにカスタムイベントを発火・購読してスクリプトを疎結合にし、モジュール化したゲームプレイのメッセージングにします。

Ammoのレイキャストホイール、サスペンション、ステアリングで車輪付き車両を動かし、デスクトップ、モバイル、WebXRで動作させます。

フルスクリーンパスでスキャンライン、ロール、色にじみを重ね、ノイズの多いVHSや湾曲したCRTモニターの見え方を再現します。

WebXRでVR内の等角長方形360度写真を映し、没入感のある球面の背景を見回せます。

WebXRセッションで全方向ビデオを再生し、ヘッドセット利用者がクリップを周囲に流しながら自由に向きを変えられます。

ARセッション中にPlayCanvasのメッシュにレイキャストし、パススルーカメラ表示と並んで仮想シェイプのタップが効くようにします。

WebXR ARとDOM overlay APIを組み合わせ、カスタムWebGLテキストなしでスタイル付きHTML/CSSのUIをカメラ映像の上に置きます。

WebXR hit-test APIで現実世界のジオメトリにレイを飛ばし、検出された床やテーブルに仮想オブジェクトをアンカーします。

WebXR input profileのメッシュをコントローラーと手用にロードし、トラッキングされたハードウェアがVRで各ベンダーのシルエットに合います。

WebXRハンドトラッキングのジョイント姿勢を読み取り、シーンで指の動きを反映し、コントローラーなしで自然な直接操作を行います。

WebXR対応のカメラリグと拡張可能なセッションライフサイクルフックを備えた最小シーンから没入型VRに入ります。

トラッキングされた手のジョイントに詳細なメッシュとマテリアルを適用し、没入型VRセッションで関節の指がはっきり見えます。

PlayCanvasのWebXRテンプレート内で6DoFコントローラーの姿勢、ボタン、触覚フィードバックのスターターコードを使ってVRで追従します。

メンテナンスされたVRサンドボックスで、XRデバイス横断のスケーラブルなインタラクションパターンとレスポンシブなレイアウトを体験します。

ARで印刷された参照画像をトラッキングし、WebXR image-tracking extensionで3Dコンテンツをその姿勢に合わせます。

WebXR平面検出の更新を購読し、床やテーブルの推定を可視化して実際の面にコンテンツをアンカーします。

Application の timeScale を切り替えてゲームプレイを一時停止・再開し、物理、アニメーション、時間ベースのロジックをまとめて止めます。

マウスとタッチでオービットカメラを実装し、スクロールホイールのズームと焦点の Entity 周りのピンチズームに対応します。

マテリアルの不透明度をアニメーションし、ジオメトリやマテリアルを複製せずに個別モデルのフェードイン・アウトを行います。

動的反射とベイクした HDR ライトマップを備えた室内 archviz サンプルを探り、リアルなライティングとマテリアルを学びます。

フルな Anim State Graph を組まずに、アニメーションカーブで Entity の動きを制御する簡単なスクリプト移動です。

サンプルしたカーブデータでサウンドスロットの音量を駆動し、線形なコード調整ではなくオーサリングしたランプに音量が従います。

Camera とライトのマスクグループで、レイヤー Scene で特定のライトとビューが選んだモデルのみに影響するようにします。

分割ビューポートでポインタ座標をカメラごとのレイに変換し、各ペインで正しい 3D 領域にピッキングが当たるようにします。

カメラをワールド空間のターゲットへ滑らかに移動・照準し、クリックやイベントで Scene 内の重要な位置をフレームに収めます。

Script のみでコリジョンと Rigidbody Component を持つ Entity を生成し、手続き的な物理オブジェクトを作ります。

ポストエフェクトのシェーダーでフレームバッファに放射状のショックウェーブ歪みを加え、衝撃やシネマティックなカメラの脈動に使います。

カメラからポインタへ物理レイを飛ばし、カーソル下にある Entity やシェイプを検出します。

スクロールする法線とフレネル色付けしたマテリアルで様式化した水面を近似し、シンプルな反射面を表現します。

Camera からテクスチャにレンダリングし、ピクセルを PNG として書き出してアプリから共有します。

バッチングで静的メッシュをより少ないドローコールにまとめ、動かないジオメトリを効率的に保ちつつ CPU 負荷を下げます。

Anim State Graph なしで Script からアニメーションクリップを再生・制御する、シンプルな再生とテスト向けの内容です。

Stencil テストでトランプの形をマスクし、窓から別の 3D Scene を見せ、魔法のポータルのように見せます。

ベクトルの lerp と quaternion の slerp で毎フレームカメラの位置と向きを滑らかに補間し、シネマティックな動きにします。

ランタイムで Scroll View の子を追加・削除し、PlayCanvas のスクリーン空間 UI でリストやフィードを組み立てます。

遅延後にコールバックを発火するワンショットタイマーをエンジンに拡張し、time scale によるグローバル一時停止を尊重します。

Entity のタグで物理 raycast のヒットをフィルタし、誤ったコライダーを無視して意図したオブジェクトだけをピッキングします。

タイミングロジックでダブルクリックを検出し、デスクトップブラウザでカメラ移動やアクションのトリガーに使います。

タッチスクリーンでシングルタップと区別してダブルタップを認識し、モバイル向け操作にします。

ウェイポイントを通るスプライン上でカメラをアニメーションし、フライスルーやガイド付きシネマティック移動に使います。

ポストプロセスパスでビネットで画像端を暗くし、色チャンネルを分けることで微妙な色収差を加えます。

木やフレア、スプライトなど、常にカメラ正面を向く平面を維持します。

ジャンプとナビゲーションで一人称操作を拡張し、FPS 風移動プロトタイプの出発点にします。

開発時とパフォーマンス調整用に、軽量の FPS オーバーレイスクリプトでフレームレートを監視します。

複数のランタイム Asset を読み込みながら UI のプログレスバーを更新し、ダウンロードとパースの進捗を表示します。

コードでグラデーションテクスチャを生成しマテリアルに適用し、ビットマップをインポートせず滑らかな色のランプを得ます。

スクリーンからワールドへの raycast でクリックした地面の位置へキャラクターやオブジェクトを移動し、シンプルなナビゲーションを実現します。

スクリーン空間のマウスドラッグの差分を毎フレーム回転の quaternion または euler 角に対応付け、オブジェクトをオービットまたはスピンさせます。

クリックで pointer lock を要求し、マウスを取得してファーストパーソン視点にし、移動でカメラを動かす間はカーソルを非表示にします。

すべてのアクティブなタッチ点を追跡し、画面上の指の間に線を描いてマルチタッチジェスチャを可視化します。

ノッチや角丸デバイスのセーフエリア内にスクリーン UI を配置し、コントロールをシステムバーやハードウェアの切り欠きから避けます。

マテリアルとアニメーションで放射状のローディングスピナー UI を実装し、コンテンツ受信中のフィードバックを明確にします。

3Dワールド座標をスクリーン空間のアンカーに投影し、ラベルとマーカーが2Dオーバーレイ上で動くオブジェクトを追従します。

ワールド空間のElementパネルを重ね、UIクワッドが不透明ジオメトリの後に描画され、忙しい3Dシーンの上でも読みやすくします。

チェイスカメラで操作可能なキャラクターを追従し、入力と物理を扱う基本的なサードパーソン移動のリグを作ります。

手番処理、勝敗判定、UI フィードバック付きのプレイ可能な 3D の三目並べ盤を、小さなサンプルゲームで実装します。

Element Component のテキストとレイアウト用の Script を、アラビア語などの右から左へ書く言語向けに正しい配置の流れで調整します。

タッチイベントで画面上のオブジェクトをドラッグ移動する、モバイル向け最小サンプルです。

Scene 開始前にすべてのファイルをプリロードせず、起動後に PlayCanvas の Asset API で複数の Asset を読み込みます。

小さなライブラリでブラウザ上でランタイムに QR コードを生成し、UI やテクスチャに表示します。

Script からマテリアルのテクスチャマップを差し替え、メッシュ Asset を複製せずにその場で再テクスチャします。

コードで Render Component のマテリアル Asset を差し替え、メッシュの Entity を複製せずに色、シェーダー、スキンを変えます。

反射用のシェーダーパスで Scene を平面に投影し、鏡や水面の平面反射をレンダリングします。

3D ビューにクリック可能なホットスポットを配置し、raycast とスクリーンオーバーレイで情報パネルを開きます。

Earth のテクスチャ、マテリアル、シェーダーで球体をシェーディングし、リアルタイムで様式化した惑星体を表現します。

ポインターに追従するパーティクルの火球で、簡単な魔法の投射物と軌跡エフェクトを作ります。

カメラシェイクとパーティクルエミッタを重ね、リアルタイムで爆発の衝撃と破片を表現します。

ポインターから物理レイキャストを飛ばし、3D でカーソル下の Entity を選択します。

地面への raycast でクリックしたワールド位置に物理が有効なプロップをスポーンし、新しいボディが正しくコリジョンします。

物理エンジンを使わず数学的なレイテストでメッシュをピックし、公開ビルドのランタイム負荷を抑えます。

数式と raycast でクリックした地面の位置に装飾用の Entity を生成し、Rigidbody シミュレーションは追加しません。

内部の 3D 解像度をパフォーマンス向けにスケールし、ワールドとオーバーレイのレンダリングパスを分けてシャープなスクリーン空間 UI を保ちます。

タッチやマウスで押下時間を計測し、十分長く押したあとにアクションを発火します。

プロジェクトの画像 Asset でローディング画面をカスタマイズし、アプリ初期化中にブランディングやスプラッシュを表示します。