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
500
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
220
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.9k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
530
DOM Observable
petamoriken
1
250
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
670
Contributing to Deno is fun!
petamoriken
0
360
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.8k
Other Decks in Programming
See All in Programming
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
170
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.4k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
2025年のz-index設計を考える
tak_dcxi
12
4.5k
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
8
3.4k
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
0
110
開発者フレンドリーで顧客も満足?Platformの秘密
algoartis
0
230
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
150
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
420
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
医療系ソフトウェアのAI駆動開発
koukimiura
1
110
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.5k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.6k
Site-Speed That Sticks
csswizardry
6
540
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Bash Introduction
62gerente
613
210k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Adopting Sorbet at Scale
ufuk
76
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
A better future with KSS
kneath
239
17k
Fireside Chat
paigeccino
37
3.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
The Cult of Friendly URLs
andyhume
78
6.3k
How to train your dragon (web standard)
notwaldorf
91
6k
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 を使うと見やすくなる