html5のcanvasの可能性

もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか?」って思うようになった。

端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。


スポンサーリンク


スポンサーリンク

html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
Javascript ビジュアル・リファレンス 改訂版

さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ

ということで、こういう考えでWordPressテーマを自作したいのであった。


スポンサーリンク

関連記事

PythonのStructure from Motionライブラリ『OpenSfM』
C#で使える可読性重視のディープラーニングライブラリ『KelpNet』
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語のルビを振ってくれるツール『ずるっこ!』
OpenCVでPhotoshopのプラグイン開発
Multi-View Stereoによる3次元復元ライブラリ『OpenMVS』
マンガで分かる JavaScriptプログラミング講座
複数視点画像から3次元形状を復元するライブラリ『openMVG』
チャットツール用bot開発フレームワーク『Hubot』
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
まだ続くブログの不調
仮想関数
Verilog HDL
オープンソースのSLAMライブラリ『Cartographer』
WordPressのサーバ引っ越し方法を考える
HD画質の無駄遣い
JavaScriptのデータビジュアライゼーションライブラリ『D3.js』
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『TouchScript』
アクセス元IPアドレスから企業名が分かるアクセス解析『User Local スマートフォン解析』
Unity ARKitプラグインサンプルのドキュメントを読む
IronPythonを使ってUnity上でPythonのコードを実行する
Raspberry Pi
Profilograph
ブログの復旧が難航してた話
機械学習手法『SVM(Support Vector Machine)』
OpenCVの超解像(SuperResolution)モジュールを試す
UnityプロジェクトをGitHubで管理する
Python for Unity:UnityEditorでPythonを使えるパッケージ
株式会社ヘキサドライブの研究室ページ
COLMAP:オープンソースのSfM・MVSツール
UnityからROSを利用できる『ROS#』
BlenderProc:Blenderで機械学習用の画像データを生成するPythonツール
ブログが1日ダウンしてました
Seleniumを使ったFXや株の自動取引
TensorSpace.js:ニューラルネットワークの構造を可視化するフレームワーク
機械学習手法『Random Forest』
Google Chromecast
PythonでBlenderのAdd-on開発
AmazonEC2のインスタンスをt1.microからt2.microへ移行する
3分の動画でプログラミングを学習できるサイト『ドットインストール』
Mask R-CNN:ディープラーニングによる一般物体検出・Instance Segmentatio...
OpenCVでiPhone6sのカメラをキャリブレーションする
法線マップを用意してCanvas上でShadingするサンプル

コメント