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.3k
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
550
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
250
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.2k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
570
DOM Observable
petamoriken
1
270
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
700
Contributing to Deno is fun!
petamoriken
0
380
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
Other Decks in Programming
See All in Programming
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
170
兎に角、コードレビュー
mitohato14
0
150
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
460
CSC305 Summer Lecture 05
javiergs
PRO
0
100
The State of Fluid (2025)
s2b
0
190
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
900
Laravel Boost 超入門
fire_arlo
1
100
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
460
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
440
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.4k
ゲームの物理
fadis
5
1.5k
A Gopher's Guide to Vibe Coding
danicat
0
170
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Being A Developer After 40
akosma
90
590k
Side Projects
sachag
455
43k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Embracing the Ebb and Flow
colly
87
4.8k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
614
210k
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 を使うと見やすくなる