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
15
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
62
Ruby × 車 (その後) ~課題:オフライン対応~
matsudai
0
65
Ruby × 車 ~ 愛車のデータを取得せよ! ~
matsudai
2
270
流行れ! AI Tuber!
matsudai
0
150
Islands on Rails !!
matsudai
0
69
Rubyで動かす検索機能
matsudai
0
170
ruby.wasmが簡単にビルドできるようになっていた
matsudai
0
180
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
Marketing to machines
jonoalderson
1
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
Design in an AI World
tapps
1
240
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.8k
Context Engineering - Making Every Token Count
addyosmani
9
970
The Cost Of JavaScript in 2023
addyosmani
55
10k
A Tale of Four Properties
chriscoyier
163
24k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
210
How Software Deployment tools have changed in the past 20 years
geshan
0
34k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
240
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 ・・・ ・・・ 再生環境
描画アプリ 描画・通信ライブラリ