Vercel v0を使って簡素なgcode viewerを作ってみる

こちらは CAMPFIRE Advent Calendar 2023 13日目の記事です。

こんにちは。株式会社CAMPFIREでエンジニアをやっています、tenmihiです。
私からは業務というより趣味全開ポストになります。

私は趣味で3Dプリンタを触って遊んでいます。
子供の頃から工作が好きだった自分からすると、まさに夢の機械でとても楽しいです。

3Dプリンタといっても世の中にはさまざまな種類があるのですが、私はPrusa mini+という小さめのプリンタをメインで利用しています。

https://www.prusa3d.com/category/original-prusa-mini/

Prusa mini+は 熱溶解積層方式(FDM) という印刷方式のプリンタで、印刷素材を文字通り熱で溶かしつつヘッド(熱で溶けた印刷素材が出てくるところ)をグイングイン動かし、出てきた印刷素材を積み上げて印刷物を作ります。
昨今皆さんが3Dプリンタと聞いて思い浮かべるイメージはおそらくこの熱溶解積層方式なのではないでしょうか?

gcodeについて

3Dプリンタは印刷したいものがデータ化された、いわゆる3Dモデルを元に造形物をプリントすることができます。
例えば以下のサイトでは船の3Dモデルがstlファイルとして公開されていて、こういったものを3Dプリンタでは印刷できるわけですね。

https://www.printables.com/model/3161-3d-benchy

しかし、3Dプリンタはその3Dモデルを直接読み取って印刷ができるわけではありません。

3Dモデルを3Dプリンタが解釈可能な命令に変換してあげる必要があり、先程紹介した熱溶解積層方式の3Dプリンタで広く使われている形式が gcode と呼ばれるものになります。

; gcodeの例
M204 S900
G1 F1100.000
G1 X102.909 Y110.211 E0.28291
G1 X103.935 Y120.252 E0.19983

単純に印刷するために3dプリンタを扱う過程であれば、(少なくとも私は普段)gcodeを直接見たり読んだりはしません。^[1]

しかしながら、プリントするモデルの品質や精度などを細かく調整したり印刷におけるトラブルシュートの際にはgcodeが一部でも読めるようになっていると便利だと思います。

ということで、今回はgcodeについてそんなに理解していない自分が少しでもgcodeを理解する取っ掛かりを作るために、与えられたgcodeがどういうものをプリントするのかweb上で簡単に可視化するwebアプリを作ってみました。

主に利用する技術

• next.js
• tailwind css
• shadcn/ui
• three.js

ホスティングにはVercelを利用して、viewのデザイン・実装にVercel v0を利用します。

モデルを可視化する上で触れる必要のあるgcodeの命令

gcodeには様々な命令があるのですが、実は今回はG1(G0)という命令1つしか触れていません。
G1は3Dプリンタが主にヘッドの移動に用いたり印刷素材の出力の設定を行う命令なので、プリントするという動きの大半はこのG1で表現されているわけなんですね。

https://marlinfw.org/docs/gcode/G000-G001.html

; G1コマンドの例
; X軸120.994mm,Y軸114.701mmに移動して押し出し量を9.57mm/minに設定
G1 X120.994 Y114.701 E9.57

可視化のためにはいろんな命令を調べて理解しないといけないと思って身構えてたのですがこれならモデルの可視化もそう難しくない気がします。

ちなみにG1命令以外には、ヘッドを指定した温度まで加熱する命令やプリント中のプリンタの一時停止など様々あります。

可視化について

three.jsに加えreactで宣言的にthree.jsを扱える@react-three/fiberを利用して可視化します。

https://github.com/mrdoob/three.js/

https://github.com/pmndrs/react-three-fiber

今回は3次元の空間にgcodeから読み取ったヘッドの動きをプロットし、lineでつなぐことでモデルを表現してみます。
ただlineをつなぐだけだとのっぺりしてしまうので高さに応じてlineの色味を変えて高さ方向に形状をわかりやすくしてみます。

Vercel v0でviewを生成する

今回viewのデザイン・実装にはVercel v0を利用してみました。

https://v0.dev/

Vercel v0はプロンプトをもとにUIを提案し、さらにそれを実装するためのコードも出力してくれるサービスです。
現在はprivate betaとして公開されていて、今回たまたま順が回ってきたので触ってみることにしました。

今回は以下のUIを考えていたのでプロンプトとして入力してみます。

• 3dモデルのビューワーがある
• gcodeファイルを読み込むボタン(フォーム)がある
• スライダーで印刷段階を調整してモデルを見えるようにする

与えてみたプロンプトはこちら。

single view to watch 3dmodel with upload butoon and range slider input

スライダーについての表現が難しそうだったので、とりあえずスライダーがあるとだけ伝えてみました。^[2]

次の3案が実際に提案されたものになります。

https://v0.dev/r/a4lICMA2WWP

今回生成しようとするUIは先述の通りかなりシンプルなものでありますが、こうも簡単に思っていたようなUIが上がってきてくれると感動します。

今回はC案が良さそうだったのでこれを選んでみます。

UIのプレビューと合わせて実装のためのコードを確認することできます。

cliからそのまま実装を引っ張ってくることもできるようなのですが、今回は手でコピってきたものを少し手直ししてthree.jsのviewを組み込む形で利用してみます。

v0で出力された実装はtailwind cssとshadcn/uiの利用が前提となっているので、それらも合わせて導入します。

https://github.com/tailwindlabs/tailwindcss

https://github.com/shadcn-ui/ui

できたもの

こんな感じに仕上がりました。
(gcodeは本記事最初の方でご紹介した3161-3d-benchyを利用させていただきました)

https://simple-gcode-viewer.vercel.app/

https://github.com/tenmihi/simple-gcode-viewer

輪郭それほどはっきりとはしてないですが、船のモデルがちゃんと映ってます。

lineでモデルを表現するのうまくいくかどうか作ってる間は不安だったのですが、うまくモデルを可視化できているのではないでしょうか。

一部命令の解釈が悪いのか、フィラメントを出力しないヘッド移動のみのタイミングで余計なラインが引かれてしまっていそうなのでそこは修正したいです。^[3]

v0で出力したUIもほとんどそのまま実装できていて、これがほとんどコードを手直ししていないのですごいです。

おわりに

今回はgcodeのG1命令しか触れませんでしたが、gcode入門という点ではなかなかいい切り口だったのではないかと思います。

今回ご紹介した3dプリンタや生成AIなど、物理的であってもなくてもなにかを表現するために便利なツールやサービスがどんどん誕生して進化しています。
皆さんも是非こういったツールやサービスを利用してものづくりをしてみてはいかがでしょうか?

明日は Koichi Hasegawa さんによるAdvent Calendar 14日目 記事になります。
今年もゲームを作って公開してくださるのでしょうか…? 楽しみですね! 🎮

脚注

1. ちなみにgcodeの記述されたファイルは基本的に上から下までただ命令が並びますが、3dモデルからgcodeへと変換を行う変換ソフト(スライサーソフト)がコメントを入れてくれたりもするのでぱっと見で全くわからんというものでもないです

2. プロンプトtypoしてましたがちゃんと汲み取ってくれてました

3. 実際プリントするときに発生する糸引きはまさにこんな形で出てきます