もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
UnityでLight Shaftを表現する
オープンソースの物理ベースレンダラ『Mitsuba』をMay...
geometry3Sharp：Unity C#で使えるポリゴ...
OpenCVの顔検出過程を可視化した動画
AfterEffectsプラグイン開発
Web経由でRaspberry PiのGPIOを操作したい
オープンソースの取引プラットフォーム
TeleSculptor：空撮動画からPhotogramme...
大河原邦男オリジナルデザイン『iXine(イグザイン)』
Iridescence：プロトタイピング向け軽量3D可視化ラ...
WordPress on Google App Engine...
Composition Rendering：Blenderに...
Polyscope：3Dデータ操作用GUIライブラリ
Mean Stack開発の最初の一歩
OpenSfM：PythonのStructure from ...
Pythonのソースコードに特化した検索エンジン『Nulle...
Unityで画面タッチ・ジェスチャ入力を扱う無料Asset『...
Point Cloud Utils：Pythonで3D点群・...
C++の抽象クラス
OpenMVS：Multi-View Stereoによる3次...
iOSデバイスと接続して連携するガジェットの開発方法
ブログをGoogle App EngineからAmazon ...
網元AMIで作ったWordpressサイトのインスタンスをt...
UnrealCLR：Unreal Engineで.NET C...
Theia：オープンソースのStructure from M...
Quartus II
ブログが1日ダウンしてました
SDカードサイズのコンピューター『Intel Edison』
COLMAP：オープンソースのSfM・MVSツール
OpenCVの超解像(SuperResolution)モジュ...
Google製オープンソース機械学習ライブラリ『Tensor...
ブラウザ操作自動化ツール『Selenium』を試す
Google XML Sitemap Generatorプラ...
UnityのGameObjectの向きをScriptで制御す...
UnityのuGUIチュートリアル
viser：Pythonで使える3D可視化ライブラリ
Google Chromecast
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
手を動かしながら学ぶデータマイニング
Structure from Motion (多視点画像から...
Mitsuba 3：オープンソースの研究向けレンダラ
UnityでTweenアニメーションを実装できる3種類の無料...
コメント