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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
matsudai
June 24, 2026
44
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
69
Ruby × 車 (その後) ~課題:オフライン対応~
matsudai
0
68
Ruby × 車 ~ 愛車のデータを取得せよ! ~
matsudai
2
280
流行れ! AI Tuber!
matsudai
0
150
Islands on Rails !!
matsudai
0
77
Rubyで動かす検索機能
matsudai
0
180
ruby.wasmが簡単にビルドできるようになっていた
matsudai
0
190
Featured
See All Featured
Unsuck your backbone
ammeep
672
58k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.8k
Side Projects
sachag
455
43k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Navigating Weather and Climate Data
rabernat
0
370
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2.1k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
470
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
770
How STYLIGHT went responsive
nonsquared
100
6.2k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
260
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 ・・・ ・・・ 再生環境
描画アプリ 描画・通信ライブラリ