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.3k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
490
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
210
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.8k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
510
DOM Observable
petamoriken
1
230
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
650
Contributing to Deno is fun!
petamoriken
0
340
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.7k
Other Decks in Programming
See All in Programming
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
180
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
470
Go1.24で testing.B.Loopが爆誕
kuro_kurorrr
0
140
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
160
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
250
ローコードサービスの進化のためのモノレポ移行
taro28
1
320
PsySHから紐解くREPLの仕組み
muno92
PRO
1
490
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
940
CQRS+ES勉強会#1
rechellatek
0
380
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
170
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
720
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.5k
How to train your dragon (web standard)
notwaldorf
91
5.9k
How to Ace a Technical Interview
jacobian
276
23k
Writing Fast Ruby
sferik
628
61k
How GitHub (no longer) Works
holman
314
140k
Making Projects Easy
brettharned
116
6.1k
Code Review Best Practice
trishagee
67
18k
Speed Design
sergeychernyshev
28
850
Facilitating Awesome Meetings
lara
53
6.3k
The Invisible Side of Design
smashingmag
299
50k
Adopting Sorbet at Scale
ufuk
75
9.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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 を使うと見やすくなる