もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
Webスクレイピングの勉強会に行ってきた
東京オリンピックと案内表示
ブラウザ上でJavaScript,HTML,CSSを書いて共...
サンプルコードにも間違いはある？
OANDAのfxTrade API
OpenCV 3.3.0-RCでsfmモジュールをビルド
KelpNet：C#で使える可読性重視のディープラーニングラ...
iOSデバイスのためのフィジカル・コンピューティングツールキ...
PyMC：Pythonのベイズ統計ライブラリ
科学技術計算向けスクリプト言語『Julia』
生物の骨格
OpenGV：画像からカメラの3次元位置・姿勢を推定するライ...
hloc：SuperGlueで精度を向上させたSfM・Vis...
PyDataTokyo主催のDeep Learning勉強会
Mean Stack開発の最初の一歩
FreeMoCap Project：オープンソースのマーカー...
Gource：バージョン管理の履歴を可視化するツール
フィクションに登場するUIデザインのまとめサイト
Raspberry Pi 2を買いました
OpenCV 3.1のsfmモジュールのビルド再び
ArUco：OpenCVベースのコンパクトなARライブラリ
NeuralNetwork.NET：.NETで使えるTens...
日本でMakersは普及するだろうか？
ブログのデザイン変えました
UnityプロジェクトをGitHubで管理する
viser：Pythonで使える3D可視化ライブラリ
pythonもかじってみようかと
チャットツール用bot開発フレームワーク『Hubot』
Open3D：3Dデータ処理ライブラリ
PythonのHTML・XMLパーサー『BeautifulS...
AnacondaとTensorFlowをインストールしてVi...
プログラミングスキルとは何か？
HTML5・WebGLベースのグラフィックスエンジン『Goo...
OpenCVのfindEssentialMat関数を使ったサ...
ブログがダウンしてました
uvでWindows11のPython環境を管理する
Python.NET：Pythonと.NETを連携させるパッ...
網元AMIで作ったWordpressサイトのインスタンスをt...
オープンソースの顔認識フレームワーク『OpenBR』
COLMAP：オープンソースのSfM・MVSツール
Twitter APIのPythonラッパー『python-...
ManimML：機械学習の概念を視覚的に説明するためのライブ...
コメント