もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
geometry3Sharp：Unity C#で使えるポリゴ...
PythonのHTML・XMLパーサー『BeautifulS...
AMIMOTO（PVM版）で作成したインスタンスをAMIMO...
Twitter APIのPythonラッパー『python-...
ブラウザ操作自動化ツール『Selenium』を試す
触れば分かる ユニバーサルデザインな腕時計『The Brad...
Human Generator：Blenderの人体生成アド...
SVM (Support Vector Machine)
FreeMoCap Project：オープンソースのマーカー...
Math.NET Numerics：Unityで使える数値計...
Unity ARKitプラグインサンプルのチュートリアルを読...
マンガで分かる JavaScriptプログラミング講座
OpenFace：Deep Neural Networkによ...
Raspberry PiでIoTごっこ
PyDataTokyo主催のDeep Learning勉強会
Deep Fluids：流体シミュレーションをディープラーニ...
WordPressプラグインによるサイトマップの自動生成
Unityの薄い本
OpenCV バージョン4がリリースされた！
pythonもかじってみようかと
Unityで学ぶC#
AndroidもopenGLも初心者さ (でもJavaは知っ...
OpenAR：OpenCVベースのマーカーARライブラリ
cvui：OpenCVのための軽量GUIライブラリ
ManimML：機械学習の概念を視覚的に説明するためのライブ...
3DCG Meetup #4に行ってきた
OpenCV3.3.0でsfmモジュールのビルドに成功！
スクレイピング
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
Google製オープンソース機械学習ライブラリ『Tensor...
iPhone・iPod touchで動作する知育ロボット『R...
OpenCVで顔のモーフィングを実装する
定数
C++始めようと思うんだ
SONY製のニューラルネットワークライブラリ『NNabla』
ZBrushで作った3Dモデルを立体視で確認できるVRアプリ...
アクセス元IPアドレスから企業名が分かるアクセス解析『Use...
Unity ARKitプラグインサンプルのドキュメントを読む
オープンソースの人体モデリングツール『MakeHuman』の...
libigl：軽量なジオメトリ処理ライブラリ
WebGL開発に関する情報が充実してきている
PyTorch3D：3Dコンピュータービジョンライブラリ
コメント