Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rubyでゲームを作りたい
Search
matsudai
June 24, 2026
57
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Rubyでゲームを作りたい
engineer unite meetup vol.11
https://enun.connpass.com/event/395886/
matsudai
June 24, 2026
More Decks by matsudai
See All by matsudai
SmTでRaspberry Pi Picoを動かす
matsudai
0
78
Ruby × 車 (その後) ~課題:オフライン対応~
matsudai
0
72
Ruby × 車 ~ 愛車のデータを取得せよ! ~
matsudai
2
280
流行れ! AI Tuber!
matsudai
0
160
Islands on Rails !!
matsudai
0
78
Rubyで動かす検索機能
matsudai
0
180
ruby.wasmが簡単にビルドできるようになっていた
matsudai
0
190
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to make the Groovebox
asonas
2
2.3k
ラッコキーワード サービス紹介資料
rakko
1
4.3M
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
410
Test your architecture with Archunit
thirion
1
2.3k
GraphQLとの向き合い方2022年版
quramy
50
15k
Unsuck your backbone
ammeep
672
58k
We Have a Design System, Now What?
morganepeng
55
8.3k
What does AI have to do with Human Rights?
axbom
PRO
1
2.3k
Music & Morning Musume
bryan
47
7.3k
Paper Plane
katiecoart
PRO
2
53k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Transcript
Rubyでゲームを作りたい Three.jsをRubyから使う Fujihara Katsutoshi (@__matsudai__) 2026-06-24 engineer unite meetup vol.11
自己紹介 名前: matsudai / ふじはら 松江でソフトウェアエンジニアをやっています。 業務ではWebアプリ開発(バックエンド)が中心。 個人的に松江高専さんの課外活動のお手伝いなど。
(前回)AI Tuber/AIアバター
None
インターネットでの配信プラットフォームから誕生した「Youtuber」「VTuber」 Hikakin https://www.youtube.com/hikakintv KizunaAI https://www.youtube.com/channel/UC4YaOt1yT-ZeyB0OmxHgolA 2007年~ Youtuber ニコ生 2016年~ バーチャルYouTuber
(VTuber)
インターネットでの配信プラットフォームから誕生した「Youtuber」「VTuber」 → AIの進化による新しい形? Hikakin https://www.youtube.com/hikakintv KizunaAI https://www.youtube.com/channel/UC4YaOt1yT-ZeyB0OmxHgolA AI Tuber? 2007年~
Youtuber ニコ生 2016年~ バーチャルYouTuber (VTuber)
「中の人」なしで活動(配信・チャットなど)するキャラクター Ani (Grok) https://grok.com/ani Neuro-sama https://vedal.ai/ Twitch フォロワー 95.9万人 紡ネン
https://tsumuginen.com/ YouTube チャンネル登録者数 10.1万人
キャラクター性をもとに、話題やコメントに対して思考 デジタルアバター・合成音声などで発信 紡ネン https://tsumuginen.com/
(デモ画面)
前回のデモ環境: ・ローカル環境でLLM APIと、音声変換APIを立ち上げ → Railsで統合・プッシュ送信で紙芝居 再生環境 配信アプリ (画像やキャラ設定管理) LLMで思考 音声合成
API (Claude Agent SDK) HTTP
課題
課題: 単純なクライアント ・ポーズ、セリフなどはサーバーから送信 ・クライアントは一般的なHTML/JS/CSS → 複雑なポーズ(3Dモデルを動かす)などの対応が難しい 再生環境 配信アプリ (画像やキャラ設定管理) LLMで思考
音声合成 API (Claude Agent SDK) HTTP
課題: 単純なクライアント ・ポーズ、セリフなどはサーバーから送信 ・クライアントは一般的なHTML/JS/CSS → 複雑なポーズ(3Dモデルを動かす)などの対応が難しい 再生環境 配信アプリ (画像やキャラ設定管理) LLMで思考
音声合成 API (Claude Agent SDK) HTTP 素のHTML/JSでなく 描画ライブラリが欲しい (でもゴリゴリ書くのはイヤ)
Ruby.wasm + Three.js
Three.js JavaScriptの3Dライブラリ WebGLによる軽量・高速な3Dレンダリングを簡単に実装できる https://threejs.org/
Ruby.wasm CRubyのWebAssembly(WASM)ポーティング Webブラウザ上で動作して、JavaScriptを呼び出すこともできる https://try.ruby-lang.org/playground/ https://github.com/ruby/ruby.wasm
課題へのアプローチ: アプリケーションコードはRubyで統一 ・描画はThree.jsで2D/3Dゲームが作れる程度の自由度 ・ブラウザとサーバ間の通信はJavaScript(WASMの制約) → 3Dモデルの利用や、ブラウザ側での描画制御が可能 配信アプリ (画像やキャラ設定管理) HTTP ・・・
・・・ 再生環境 描画アプリ 描画・通信ライブラリ
デモ 今回は簡単な2D/3Dゲームが作れるよ、という程度 🙇 https://trs.matsudai.net/
まとめ・今後の予定: ・今回はThree.jsによるリアルタイム描画・制御をRubyで実装する例 ・今後は汎用的なゲームライブラリとして成長させつつ、 AIアバターに3Dモデルでの表現力を搭載することを目指す 配信アプリ (画像やキャラ設定管理) HTTP ・・・ ・・・ 再生環境
描画アプリ 描画・通信ライブラリ