もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
ディープラーニング
Google Chromecast
TensorSpace.js：ニューラルネットワークの構造を...
Twitter APIのPythonラッパー『python-...
UnrealCLR：Unreal Engineで.NET C...
書籍『ROSプログラミング』
Mask R-CNN：ディープラーニングによる一般物体検出・...
OpenCVで動画の手ぶれ補正
OANDAのfxTrade API
『日本の巨大ロボット群像』を見てきた
CycleGAN：ドメイン関係を学習した画像変換
RSSフィードを読込んで表示するWordpressプラグイン...
Unityで学ぶC#
UnityでARKit2.0
OpenCV バージョン4がリリースされた！
スクレイピング
D3.js：JavaScriptのデータビジュアライゼーショ...
OpenFace：Deep Neural Networkによ...
UnityのuGUIチュートリアル
Google XML Sitemap Generatorプラ...
Boost オープンソースライブラリ
cvui：OpenCVのための軽量GUIライブラリ
Google App Engineのデプロイ失敗
BlenderProc：Blenderで機械学習用の画像デー...
サンプルコードにも間違いはある？
uvでWindows11のPython環境を管理する
網元AMIで作ったWordpressサイトのインスタンスをt...
WordPressのサーバ引っ越し方法を考える
ZBrushのZScript入門
PGGAN：段階的に解像度を上げて学習を進めるGAN
デザインのリファイン再び
プロダクトデザイン概論
PyMC：Pythonのベイズ統計ライブラリ
OpenGVのライブラリ構成
HerokuでMEAN stack
書籍『ゼロから作るDeep Learning』で自分なりに学...
Unityからkonashiをコントロールする
Google App Engine上のWordPressでA...
OpenCV3.3.0でsfmモジュールのビルドに成功！
TeleSculptor：空撮動画からPhotogramme...
Unityで強化学習できる『Unity ML-Agents』
MPFB2：Blenderの人体モデリングアドオン
コメント