もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
AMIMOTO（PVM版）で作成したインスタンスをAMIMO...
uvでWindows11のPython環境を管理する
Raspberry Pi 2のGPIOピン配置
Gource：バージョン管理の履歴を可視化するツール
『Geocities-izer』 どんなWebページも一昔前...
NumSharp：C#で使えるNumPyライクな数値計算ライ...
線画を遠近法で描く
Cartographer：オープンソースのSLAMライブラリ
Theia：オープンソースのStructure from M...
Deep Learningとその他の機械学習手法の性能比較
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
LuxCoreRender：オープンソースの物理ベースレンダ...
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
OpenCVで動画の手ぶれ補正
ZScript
株式会社ヘキサドライブの研究室ページ
HTML5・WebGLベースのグラフィックスエンジン『Goo...
hloc：SuperGlueで精度を向上させたSfM・Vis...
機械学習で遊ぶ
PGGAN：段階的に解像度を上げて学習を進めるGAN
UnityでARKit2.0
TensorFlowでCGを微分できる『TensorFlow...
Webページ制作のためのメモ
FreeMoCap Project：オープンソースのマーカー...
Google Colaboratoryで遊ぶ準備
Python for Unity：UnityEditorでP...
書籍『ゼロから作るDeep Learning』で自分なりに学...
OpenMesh：オープンソースの３Dメッシュデータライブラ...
Google App Engineのデプロイ失敗
Polyscope：3Dデータ操作用GUIライブラリ
DCGAN (Deep Convolutional GAN)...
WebGL開発に関する情報が充実してきている
今年もSSII
ManimML：機械学習の概念を視覚的に説明するためのライブ...
Javaで作られたオープンソースの3DCGレンダラ『Sunf...
現在公開されているWeb API一覧
Unityで学ぶC#
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
openMVG：複数視点画像から3次元形状を復元するライブラ...
マルコフ連鎖モンテカルロ法
WordPress on Windows Azure
プログラミングスキルとは何か？
コメント