もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Human Generator：Blenderの人体生成アド...
Cartographer：オープンソースのSLAMライブラリ
OpenCVのfindEssentialMat関数を使ったサ...
書籍『仕事ではじめる機械学習』を読みました
フィクションに登場するUIデザインのまとめサイト
OpenCVの顔検出過程を可視化した動画
Quartus II
Polyscope：3Dデータ操作用GUIライブラリ
Mask R-CNN：ディープラーニングによる一般物体検出・...
FCN (Fully Convolutional Netwo...
Multi-View Environment：複数画像から3...
Windows10でPyTorchをインストールしてVSCo...
Python for Unity：UnityEditorでP...
OpenCVで顔のランドマークを検出する『Facemark ...
Composition Rendering：Blenderに...
Pythonの自然言語処理ライブラリ『NLTK(Natura...
Caffe：読みやすくて高速なディープラーニングのフレームワ...
OpenCVでPhotoshopのプラグイン開発
openMVGをWindows10 Visual Studi...
OpenCVでiPhone6sのカメラをキャリブレーションす...
BlenderProc：Blenderで機械学習用の画像デー...
OpenGVのライブラリ構成
Mitsuba 3：オープンソースの研究向けレンダラ
Amazon Web ServicesでWordPress
TensorFlowでCGを微分できる『TensorFlow...
線画を遠近法で描く
組み込み向けのWindows OS 『Windows Emb...
LuxCoreRender：オープンソースの物理ベースレンダ...
Mean Stack開発の最初の一歩
Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...
デザインのリファイン再び
ZBrushのZScript入門
PGGAN：段階的に解像度を上げて学習を進めるGAN
3Dグラフィックスの入門書
OpenCVで顔のモーフィングを実装する
SONY製のニューラルネットワークライブラリ『NNabla』
Unity MonoBehaviourクラスのオーバーライド...
WordPressの表示を高速化する
Accord.NET Framework：C#で使える機械学...
3Dモデルを立体視で確認できるVRアプリを作っている
OpenMVSのサンプルを動かしてみる
ブログをwpXレンタルサーバーからwpX Speedへ移行
コメント