もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
GitHub Pagesで静的サイトを作る
ブラウザ上でJavaScript,HTML,CSSを書いて共...
OpenCV 3.1から追加されたSfMモジュール
『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...
UnityのTransformクラスについて調べてみた
TeleSculptor：空撮動画からPhotogramme...
viser：Pythonで使える3D可視化ライブラリ
BlenderProc：Blenderで機械学習用の画像デー...
OpenCVで顔のランドマークを検出する『Facemark ...
Swark：コードからアーキテクチャ図を作成できるVSCod...
定数
アクセス元IPアドレスから企業名が分かるアクセス解析『Use...
『Geocities-izer』 どんなWebページも一昔前...
歯を食いしばって見るべき動画
OpenFace：Deep Neural Networkによ...
WordPressプラグインの作り方
マンガで分かる JavaScriptプログラミング講座
Kornia：微分可能なコンピュータービジョンライブラリ
プロダクトデザイン概論
RSSフィードを読込んで表示するWordpressプラグイン...
変形ロボットのデザイン
PyTorch3D：3Dコンピュータービジョンライブラリ
JavaScriptとかWebGLとかCanvasとか
OpenCVでiPhone6sのカメラをキャリブレーションす...
Web経由でRaspberry PiのGPIOを操作したい
OpenCV
Gource：バージョン管理の履歴を可視化するツール
ドットインストールのWordPress入門レッスン
触れば分かる ユニバーサルデザインな腕時計『The Brad...
OpenCVでPhotoshopのプラグイン開発
ドラマ『ファーストクラス』のモーショングラフィックス
cvui：OpenCVのための軽量GUIライブラリ
OpenCV バージョン4がリリースされた！
ディープラーニング
Webページ制作のためのメモ
Javaで作られたオープンソースの3DCGレンダラ『Sunf...
書籍『ROSプログラミング』
AnacondaとTensorFlowをインストールしてVi...
タマムシっぽい質感
geometry3Sharp：Unity C#で使えるポリゴ...
Mitsuba 2：オープンソースの物理ベースレンダラ
UnityのGameObjectの向きをScriptで制御す...
コメント