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 with WebAssembly by Pure Rust
Search
petamoriken / 森建
September 13, 2019
Technology
0
1.1k
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 / 森建
DOM Observable
petamoriken
1
120
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
460
Contributing to Deno is fun!
petamoriken
0
230
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.1k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
730
Multithreading WebAssembly by Rust
petamoriken
3
980
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
810
バイト列から整数を得る
petamoriken
1
520
Other Decks in Technology
See All in Technology
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
スレットハンティングについて知っておきたいこと
hacket
0
130
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
A better future with KSS
kneath
231
17k
BBQ
matthewcrist
82
9k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Designing for humans not robots
tammielis
247
25k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Leading Effective Engineering Teams 2024
addyosmani
3
300
How to train your dragon (web standard)
notwaldorf
79
5.5k
Happy Clients
brianwarren
94
6.5k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
A Philosophy of Restraint
colly
200
16k
RailsConf 2023
tenderlove
16
720
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 を使うと見やすくなる