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
WebAssembly で WebP のデコードを試した / Decode WebP w...
Search
petamoriken / 森建
September 13, 2019
Programming
0
1.2k
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by pure Rust
Fukuoka.rs vol.5 〜LT会〜
https://fukuokars.connpass.com/event/139461/
petamoriken / 森建
September 13, 2019
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
520
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
240
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.1k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
550
DOM Observable
petamoriken
1
260
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
680
Contributing to Deno is fun!
petamoriken
0
370
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
390
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
5つのアンチパターンから学ぶLT設計
narihara
1
120
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
ReadMoreTextView
fornewid
1
480
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
530
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
430
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Designing for Performance
lara
609
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Side Projects
sachag
455
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How to train your dragon (web standard)
notwaldorf
93
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Writing Fast Ruby
sferik
628
61k
Fireside Chat
paigeccino
37
3.5k
Transcript
で のデコードを試した pixiv Inc. 2019.9.13 Fukuoka.rs #5 LT
2 自己紹介 • 主にフロントエンドエンジニア • ActionScript 3.0 を JavaScript に書き直したり
WebGL を駆使したサイトを作ったり PHP のコードをリファクタリングしたり • ブラウザの限界に迫るのが好き 課題解決部
3 とは • アセンブリでないバイトコード • 豊富な実行環境がある ◦ モダンブラウザ Chrome /
Firefox / Safari / Edge ◦ Node.js v8 以降(AWS Lambda, BigQuery など) ◦ Wasmer というランタイムを使えば Rust / C / Go / Ruby などで実行できる • ECMAScript と似た策定プロセスを取っている
4 の策定プロセス • Phase 1 Feature Proposal ◦ 機能追加が承認される •
Phase 2 Proposed Spec Text Available ◦ 最初の Spec テキストが作られる • Phase 3 Implementation Phase ◦ Spec テキストが完成し、レビューが完了する • Phase 4 Standardize the Feature ◦ 1つのツールチェイン、2つ以上の実行環境が作られ、承認される
ブラウザにフォーカスして 話していきます 5
6 ブラウザにおける の用途 • C などで書かれたコード資材(ライブラリ)をブラウザ上で動かす ◦ モバイルアプリと Web アプリの一部コードの共通化が出来る
◦ Emscripten などを使って WebAssembly or asm.js に変換する ▪ なんとか動かすことは出来るが特殊な知識・技術を必要とする ◦ C/C++とWebAssemblyを利用したライブラリ開発 https://www.slideshare.net/llamerada-jp/ccwebassembly
7 ブラウザにおける の用途 • DOM も含めて非 JavaScript で開発する ◦ WebAssembly
から直接 DOM API を触る機能はまだない ▪ Phase 1 Interface Types で議論されている ◦ JavaScript の函数は実行できるので DOM API をラップして渡すことは出来る ▪ Rust の Yew (wasm-bindgen) や C# (.NET) の Blazor などは自動でラップ • グルーコードを触れない個人的にあまり好きではない ……
8 ブラウザにおける の用途 • 重いデコード処理や行列演算などをブラウザで行う ◦ JavaScript よりも実行速度が速いためプロダクトの要所で使う ▪ 将来的に
Phase 2 Threads, Fixed-width SIMD で更に速くできる ◦ デコードできないファイル形式を扱うことが出来る ▪ 通信コスト削減が出来る WebP 形式の画像は Safari で扱えないが WebAssembly で対応できる?
9 のデコード • https://github.com/petamoriken/wasm-webp-test • image クレートを使って WebP のデコードをした(まだ輝度しか取り出せない)
10 結果 • Chrome • Firefox • Safari
11 やってみた感想 • image クレートの WebP 対応が微妙 ◦ 輝度しか対応していない(PR で作業されている)
◦ VP8 のチャンクが VP8␣ 始まりでないといけない ▪ ImageMagick で生成した WebP が不正扱いになってしまう 要調査 • WebAssembly のエラー周りが大変 ◦ 仕様としては Phase 1 Exception handling で議論されてそう ◦ wasm-bindgen を使う場合は console_error_panic_hook を使うと見やすくなる