2018年2月16日金曜日

CSS Painting APIについて取り急ぎまとめてみた

次期Chrome65でのサポートがうたわれているCSS Painting APIについて構成がcanvasっぽいとのことだったのでまとめてみました.

CSS Painting APIの基本的な使い方・まとめ
https://defghi1977-tech.firebaseapp.com/cssPainting/cssPainting.htm
http://defghi1977.html.xdomain.jp/tech/cssPainting/cssPainting.htm

※二つあるのは本APIがHTTPS環境でしか動作しないから.
ずっとlocalhost環境で試していたからわからんかったけれど, 確かChromeのポリシーに強力なAPIはとりあえずHTTPSでしか動作させないってのがあったので, 多分これに引っかかっている.
(運用的にめどいけれど悔しいので両方残しておくこととす)


2018年2月5日月曜日

御城プロジェクト:RE/千年戦争アイギスがChromeで余りに重い件

2018/02/14
Chromeがバージョンアップしました.
バージョン: 64.0.3282.167(Official Build) (64 ビット)
で本不具合が改善(元に戻る)します

https://chromium.googlesource.com/chromium/src/+log/64.0.3282.140..64.0.3282.168?pretty=fuller&n=10000 

"Fix canvas flickering properly and remove GPU performance regression"
とのことで, 公式に「canvasのGPU周りでしくじってたのを直した」との見解が出たので速やかにバージョンアップして良さそうです.

---

公式の対処策だと,WebGLを使っているゲーム(神姫とか)やFlashでもハードウェアアクセラレーションが無効化されてしまうので, 快適にゲームをするためにいちいちブラウザ設定を変更する必要があります.

そこで本記事ではその代替案を紹介します.

※この手の問題はDMMに文句を言うよりもGoogleに報告するのが筋です
Chromeの「問題の報告」から「お前さんのところのChromeを使うとめっさパフォーマンスが落ちるサイトがあるよ」と伝えてあげましょう
ブラウザをOSごとクラッシュさせうる問題なので, 喜んで受け取ってくれるはずです

2017年12月14日木曜日

WEB仕様におけるHSL色空間の混沌

WEB(HTML/CSS/SVG)が扱う標準的な色空間はsRGBだったが 最新のCSSカラーではHSLによる色の指定が可能となった.

sRGB色空間とHSL色空間とは色の表現範囲が一致しているため, RGB値をHSL値としたりその逆が可能なのだが, 実はWEBでは3つのHSL解釈が存在しており, それらを混在させると思うような結果が得られない…というケースに遭遇したので本記事ではその内容について整理しておく.


2017年12月12日火曜日

dotrace.jsの使い方・SVGにおける多色画像のHSLAビット合成的アプローチ

前回作ったdotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチRGBA画像をHSLA画像に変換してSVGフィルタで元画像を復元とを組み合わせてみたところ, それはもう素晴らしい出力結果が得られたので公開する.

従来SVGでは実現が困難と考えられてきた多階調の自然画風グラフィックを無理やりベクタ化する際の一つのアプローチとして非常に効果的である.

NOTE:2017/12/13
但し本スクリプトでの出力結果はSVG本来のメリットであるスケール非依存性が失われるため, 使い勝手は悪い.

2017年12月9日土曜日

dotrace.jsの使い方・SVGにおける多色画像のRGBAビット合成的アプローチ

WEBでは画像をRGBA各8bitで扱う. なので, RGBA値をそれぞれbit値毎にpath図形化し, SVGフィルタで合成し直すことで, 理論上はあらゆるグラフィックは高々32個のpath要素(とSVGフィルタ)で表せるはずだ.

では実際にこのようなアプローチに沿って作ったSVGの描画パフォーマンスは如何なものか?
ということで, Node.jsスクリプトを書いてみた.

結果は「使い物にならないSVGを吐くポンコツスクリプト」であることが判明したが, まぁ, dotrace.jsの使い方の例としての意義はあると思い公開した.

12/12バグを見つけたので修正

ドット絵SVG化スクリプト:dotrace.js

以前から公開している「ドット絵SVG化スクリプト」シリーズをバッチで処理したいという意見を聞いた気がしたので, 元のコードからweb依存性を排除してNode.js環境(つまりコマンドライン)でも動作するようにしてみた.

dotrace.js
(http://defghi1977.html.xdomain.jp/tech/dotrace/dotrace.htm)

機能的にはver2とver3のいいとこ取りをしたつもりなので, 使い勝手はこれまで通りだ(と思う).
※色数制限等の細かいことは全くしていません(でかいSVGが作られても知らね). 予め減色しておくとか, JPEGを弾くとか各自で工夫して下さい. (最適な出力は環境毎に異なると思うので, 柔軟に扱えるようにしている)

ライセンスをMITにしておいたので, 適宜使い倒して下さい.

動作原理はこちら
https://stackoverflow.com/questions/42595343/bitmap-to-svg-path/42595975#42595975