もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Python.NET：Pythonと.NETを連携させるパッ...
OpenMesh：オープンソースの３Dメッシュデータライブラ...
OpenCVの三角測量関数『cv::triangulatep...
天体写真の3D動画
3Dモデルを立体視で確認できるVRアプリを作っている
adskShaderSDK
大河原邦男オリジナルデザイン『iXine(イグザイン)』
Pythonのソースコードに特化した検索エンジン『Nulle...
Composition Rendering：Blenderに...
Windows10でPyTorchをインストールしてVSCo...
BGSLibrary：OpenCVベースの背景差分ライブラリ
DCGAN (Deep Convolutional GAN)...
IronPythonを使ってUnity上でPythonのコー...
iOSで使えるJetpac社の物体認識SDK『DeepBel...
映画から想像するVR・AR時代のGUIデザイン
pythonもかじってみようかと
プログラムによる景観の自動生成
Theia：オープンソースのStructure from M...
NeuralNetwork.NET：.NETで使えるTens...
機械学習で遊ぶ
HerokuでMEAN stack
BlenderのPython環境にPyTorchをインストー...
ZScript
線画を遠近法で描く
オープンソースのロボットアプリケーションフレームワーク『RO...
Iterator
Multi-View Environment：複数画像から3...
ブログをGoogle App EngineからAmazon ...
AnacondaとTensorFlowをインストールしてVi...
ブラウザ上でJavaScript,HTML,CSSを書いて共...
WordPress on Google App Engine...
MPFB2：Blenderの人体モデリングアドオン
D3.js：JavaScriptのデータビジュアライゼーショ...
R-CNN (Regions with CNN featur...
Raspberry PiのGPIOを操作するPythonライ...
PGGAN：段階的に解像度を上げて学習を進めるGAN
AndroidもopenGLも初心者さ (でもJavaは知っ...
Boost オープンソースライブラリ
Google Colaboratoryで遊ぶ準備
Unityの各コンポーネント間でのやり取り
Gource：バージョン管理の履歴を可視化するツール
C++ 標準テンプレートライブラリ (STL)
コメント