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
APNG maker on wasm
Search
poccariswet
November 02, 2019
Technology
1
180
APNG maker on wasm
rust, APNG, wasm
poccariswet
November 02, 2019
Tweet
Share
More Decks by poccariswet
See All by poccariswet
rust for web app
poccariswet
2
350
past and future
poccariswet
0
59
ncursesを学ぼう
poccariswet
0
68
shorterql
poccariswet
0
75
i_and_go
poccariswet
0
51
editor
poccariswet
0
90
さぁ、深夜ラジオを聴こう!
poccariswet
0
92
Aizu-Go
poccariswet
1
140
Other Decks in Technology
See All in Technology
ローカルLLMでファインチューニング
knishioka
0
140
Welcome to the LLM Club
koic
0
160
ハノーバーメッセ2025座談会.pdf
iotcomjpadmin
0
160
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
120
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1k
Agentic Workflowという選択肢を考える
tkikuchi1002
1
480
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
[TechNight #90-1] 本当に使える?ZDMの新機能を実践検証してみた
oracle4engineer
PRO
3
160
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
390
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
4
1.1k
Featured
See All Featured
Building an army of robots
kneath
306
45k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Making Projects Easy
brettharned
116
6.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Embracing the Ebb and Flow
colly
86
4.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Code Review Best Practice
trishagee
68
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
It's Worth the Effort
3n
185
28k
Transcript
rust de wasm ~ APNG maker ~ 2019/11/2
• soeyu • 20卒予定 • skill golang, rust, video/live streaming
• like radio
話すこと • apngのこと • wasmとrustのこと • wasm-bindgenのこと • 作ったもののこと •
思ったこと • 今後...
APNG • Animated PNGの略 • PNGファイルをアニメーション(連番画像)のように表現した画像のこと • PNGフォーマットを拡張してできた画像のこと ◦ acTL(Animation
Controlチャンク) ◦ fcTL(Frame Controlチャンク) ◦ fdAT(Frame Dataチャンク)
APNG article • https://github.com/poccariswet/apng • https://qiita.com/poccariswet/items/677fda45f837f4d1dc3c • https://medium.com/@poccariswet/how-i-developed-apng-libr ary-for-rust-98d366f1195b
wasmとは • WebAssemblyの略 • ブラウザで高速にプログラムを実行できるバイナリ • 高速、高効率、ポータブル • 今はWebAPIは直接操作はできない
rust de wasm • garbage collectionがない • ランタイムが小さい ( golangだと GC,
ランタイムが大きいため wasm fileが2MB を超えてしまう。rustだと2KB) • メモリセーフのためマルチスレッド時、安全 • 豊富なwasmのための エコシステム ◦ wasm-bindgen ◦ wasm-pack ◦ wasm-app (npm template) https://opensource.com/article/19/2/why-use-rust-webassembly
rust wasm tutorial
wasm-bindgen • wasmには絶対必須 • rustのメソッド、構造体を jsのクラスに • wasm とjs間 のinterface
◦ js-sys ◦ web-sys ◦ console_error_panic_hook
APNG maker on wasm demo
APNG maker on wasm • APNG を作る web app ◦
file reader 複数fileを [ Uint8Array, Uint8Array … ] にする ◦ rustで書かれたEncodeメソッドに渡す ◦ encodeしたfile buffer を返す ◦ buffer -> Blob -> createObjectURL
pkg/apng.wasm pkg/apng.js index.js
APNG maker on wasm • 大変だったところ ◦ JSとRust(wasm)のデータのやり取り ◦ Rust所有権システム
JSとRust(wasm) のデータのやりとり • fileをJS->Rustにどうやっておくるか ◦ jsのArray型 を rust Vec<Vec<u8>> 型にしたい
▪ js data: ◦ js_sysを使う ▪ js_sys::Array let data: Vec<Vec<u8>> = js_sys::JsCast::Uint8Array(array) ❌ Array { obj: Object { obj: JsValue([Uint8Array, Uint8Array]) } }
JSとRust(wasm) のデータのやりとり let data: Vec<Vec<u8>> = data .values() // return
Iterator .into_iter() // return JsValue .map(|x| { x.unwrap_throw() // ↓ JsValueの中身をcastする .unchecked_ref::<js_sys::Uint8Array>() .to_vec() // Uint8ArrayをVec<u8>にする }) .collect(); // Vec<u8> をVec<>の中にcollectする
Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf
= vec![]; let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{:?}", buf); // <--- ERRORRRRRRRRRR!!!! println!("{}", test); }
Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf
= vec![]; { let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{}", test); } // BufWriterのライフタイムがこの中なので、所有権はこ こでmainのbufに戻される println!("{:?}", buf); }
Rust所有権システム use std::io::{BufWriter, Write}; fn main() { let mut buf
= vec![]; { let test = "Hello, string io!"; let mut f = BufWriter::new(&mut buf); f.write(test.as_bytes()).unwrap(); println!("{}", test); } // BufWriterのライフタイムがこの中なので、所有権はこ こでmainのbufに戻される println!("{:?}", buf); }
思ったこと • RustでJSの一部分を書き換えるのは意外と簡単 • js でapngのエンコードをしたことはないが、やっぱり速そう • エコシステムはそろってはいるが発展途上 ◦ wasm-bindgenでほしいメソッドがまだ少ない
今後... • オプションの設定の追加をしていく ◦ 1PNG画像の frame speed, frame loop数などの •
次こそはrustでvideo transcoderつくりたい... • みんなも触ってみてね
Thanks!!!