PlayCanvasを使って、150名以上の中高生が作成した3Dモデルを組み込んだドミノ倒しのプロジェクトを作りました。

はじめに

GMOグローバルサイン・ホールディングス PlayCanvas推進室の羽賀(mxcn3)です。「前回の記事」を書いたあとから、まだ、ずっとVR関係にはまっております。業務では、ゲームエンジンPlayCanvasのコミュニティの運営や、テクニカルサポートをさせていただいております。また、今回のプロジェクトも業務の一環で携わらせていただきました。

この記事について

10月5日・6日開催のしものせき未来創造 jobフェアに参加をさせていただきました。下関市内の中学生・高校生を対象にした職業体験のイベントです。実施についてレポートを含めて紹介させていただきます。出展の詳細については、弊社の「ニュースリリース」をご覧ください。

作成したプロジェクトについて

下関市内を一周するドミノ倒しのフィールドに、総勢150名を超える中高生が自分で作った3Dモデルをドミノとして配置して作り上げたWebGL製のプロジェクトです。

プロジェクトはこちらから体験できます。

概要

今回出展させて頂いたイベントは海峡メッセ下関（山口県下関市）にて開催された、下関市の企業・団体を紹介する中学生向け職業体験イベントです。下関市内の企業が多く出展するイベントとなっており、市内のほとんどの中学校・中学生が参加するイベントでした。弊社では、3Dモデルを作り、それをゲームエンジンを利用するところまで体験頂くための内容を実施いたしました。

企画から制作からプロジェクトを作成するまでの流れ

今回のイベントへの出展は、下関拠点のチームからなにか一緒に出来ることがないかと声をかけられたことがきっかけでした。その結果、今回は東京の拠点のチームと下関拠点のチームで協力をしてプロジェクトの作成から当日のイベント参加まで行いました。リモートワークや多拠点間の連携ということもあり、基本的には、全てオンライン約3ヶ月程の期間イベントの準備を進めました。

私たちの部署は、PlayCanvasという商材を販売している部署であり、PlayCanvasと職業体験を組み合わせた取り組みができないかという事で企画を進めました。イベントの特性上、ブースへの学生の滞在時間が10分〜30分程度ということだったので、プログラミングの学習というよりは体験に重きをおいた内容を考えました。

参加される学生のレベルなどにもバラツキがあるということを想定して、「VOXCELCANVAS」（弊社パートナーが作成したツール）というボクセルの3Dモデルを作成できるツールがちょうどイベントには向いているのではないかということでこちらと組み合わせてイベント企画をしました。内容として、3Dモデルを作る体験、それをゲームエンジンに取り込んで実際に動くところまでを見ていただく体験としました。

参加者の体験の流れ（企画段階）

VOXCELCANVASについて

VOXCELCANVASはブラウザで動くボクセル作成が出来るウェブサービスです。マウス操作のみでボクセルの3Dモデルを作成できます。作成した3DモデルはOBJ形式などでエクスポートができます。

PLAYCANVASについて

PlayCanvasはゲームエンジンで、弊社が国内の代理店となっているウェブサービスです。今回はVOXELCANVASで作成したOBJ形式のフォーマットの3Dモデルをインポートして、それぞれの3Dモデルをドミノとしてステージ上に配置をし、作成したプロジェクトのホスティングまでを行っています。

PlayCanvasについては本ブログにいくつか記事を書かせていただいております。興味がある方は合わせてご参照ください。

事前準備

メンバー

• 企画・各種調整 x 2名
• フロントエンドエンジニア x 1名
• デザイナー x 1名
• テクニカルアーティスト(3Dモデラー) x 1名

私は、その中でフロントエンドのエンジニアとして、PlayCanvasでの実装を担当させていただきました。プロジェクトの準備については別のご担当いただいた方の内容も含んで紹介させていただきます。

プロジェクトの準備

1. 3Dデータの作成

今回のプロジェクトでは、企画を担当していた下関拠点メンバーから、「下関市の全ての中学校から学生が参加するというイベントなので、全ての学校を入れ込んだフィールドを作りたい」という要望がありました。、それを踏まえて、下関市内の名産品や下関市の中学校をモチーフにした3Dデータを作成しました。

下関市をモチーフにした3Dモデルを作成

2. PlayCanvasでの実装

3Dモデルを作成の作成後は、PlayCanvasで上でドミノ倒しに加えてイベント会期中にモニターに映し出すための展示用の機能などを作成しています。

PlayCanvasを利用してフィールドを作成

3. 見本・マニュアル時の準備

当日参加者の方が作成頂く見本のモデルを一部、VOXELCANVASを使用して作成しました。
また、ボクセルを作成する経験があるチームメンバーが少なかったため、チームメンバーに対してもツールの利用方法をロールプレイ形式で体験を実施しました。

VOXELCANVASで作成されたドミノの見本

アカウントの準備

事前に、VOXELCANVASのアカウントの作成および、PlayCanvasで、このプロジェクトのみアクセス権を持つユーザーを当日の会場のパソコンの台数分追加して同時編集できるように準備をしました。

一つのプロジェクトに対して11名のユーザーが編集可能になっている状態

それぞれのユーザーがAdmin / Write / Readという権限に分かれており、権限を分けて開発が可能です。
また、このプロジェクトを複数ユーザーで同時に操作をした場合には、ユーザー1、ユーザー2それぞれの編集がリアルタイムに反映されます。

共同編集で開発した画面のキャプチャ(PlayCanvas)

備品について

会場にWi-Fiがないことが想定されたため、100GBまで試用できるのポケットWi-Fi、
パソコンは下記のスペックのパソコンを8台レンタルにて手配いたしました。

イベント当日

イベントについては、朝から夕方まで実施され、時間帯によっては、会場内の学生が600名以上の時間帯もあり、ブースに入れずお待ちいただくこともありました。

イベント当日の風景

1. 3Dモデル作成体験について

ブースに来場いただいた学生の方には、3Dモデルを作る前にマニュアルを元に5分程度、操作の説明をさせていただいて、自由に3Dモデルの作成をいただきました。このようにブラウザ内でマウスを使用して自由に色を変えたり、モデルを変形させたりして3Dモデルを作成していただきました。

3Dモデル作りの体験(VOXELCANVAS)

参加者の方が作成した3Dモデル（一部）

2. ドミノ倒しについて

作成した3Dモデルをドミノとしてフィールド上に配置をする際には、基本的にはスタッフがどこに配置をするかお聞きをして、フィールド上に配置をしました。多くの学生の方は、ご自身の通われている中学校の周りにドミノを配置されました。その際に、テクスチャやマテリアルといった言葉を既に知っている方も何名かいらっしゃいました。

ドミノ倒しのプロジェクト(PlayCanvas)

参加いただいた学生の方には、自宅などで遊んでいただけるようにプロジェクトのURLの二次元コードを含むパンフレットをお渡しいたしました。

イベントを実施して

イベント終了後、集計をすると150個以上の3Dモデルが作成されました、見本となるような参考の3Dモデルを印刷したものを置いておりましたが、何も見ずに自分たちの想像で3Dモデルを作成されている方も何人もいらっしゃいました。

当初想定していた、ドミノの通り道以外にも好きなところに3Dモデルを配置した学生が多く、イベント会期後のプロジェクトはにぎやかになりました。

完成したPlayCanvasプロジェクト（キャプチャ）

イベント会期前・会期後の比較

プロジェクトの実行方法

このプロジェクトについてはURLにアクセス頂くことで体験ができます。

1. プロジェクトについては、こちらのウェブページにアクセス
2. 読み込み後、「スタートボタン」をクリック（タップ）してください。

あとがき

開催期間中には総勢150名を超える学生の方々にご参加いただき、3Dモデルの作成をしていただきました。

8台のパソコンで共同編集するという珍しいプロジェクトでしたが、定期的にバックアップを取っていたこともあり、特に問題なくプロジェクトを作成することができました。また、設備・環境についてもブラウザで3Dモデルを利用したプロジェクトですが、2日間Wi-Fiの利用量や、パソコンの動作については問題なくイベントが実施できました。

作成するのが早い方は10～15分程度で3Dモデルを作り終えましたが、中には30分～1時間程度時間を掛けて、滞在時間のギリギリまでこだわり抜いた3Dモデルを作っている方もいらっしゃいました。ほとんどの方が初めて触るツールでも簡単な説明をしただけで触ることができていることに驚きました。多くの学生の方々から「楽しかった」という感想をいただき、また保護者の方からも「子どもはパソコンを初めて触ったが、すぐに使いこなしていて驚いた。新しい一面が発見できた」という嬉しいお声をいただきました。

この記事を見ていただいて、このような取り組みに興味を持っていただいた方などがいらっしゃいましたら、お問い合わせもしくは、何か、ご質問や不明点などがありましたら@mxcn3へご連絡お願いいたします。