もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
機械学習手法『Random Forest』
ブラウザ上でJavaScript,HTML,CSSを書いて共...
C#で使える遺伝的アルゴリズムライブラリ『GeneticSh...
触れば分かる ユニバーサルデザインな腕時計『The Brad...
書籍『3次元コンピュータビジョン計算ハンドブック』を購入
PythonでBlenderのAdd-on開発
スクレイピング
OpenCVのfindEssentialMat関数を使ったサ...
Raspberry Pi
Amazon Web ServicesでWordPress
GAN (Generative Adversarial Ne...
Konashiを買った
Structure from Motion (多視点画像から...
SONY製のニューラルネットワークライブラリ『NNabla』
デザインのリファイン再び
Pythonの自然言語処理ライブラリ『NLTK(Natura...
OpenMesh：オープンソースの３Dメッシュデータライブラ...
Unity Scriptコーディング→Unreal Engi...
UnityでPoint Cloudを表示する方法
Unityの各コンポーネント間でのやり取り
openMVGをWindows10 Visual Studi...
SONYの自律型エンタテインメントロボット『aibo』
DCGAN (Deep Convolutional GAN)...
konashiのサンプルコードを動かしてみた
JavaScriptとかWebGLとかCanvasとか
SDカードサイズのコンピューター『Intel Edison』
WordPress on Google App Engine...
OpenCVでカメラ画像から自己位置認識 (Visual O...
Google Chromecast
タマムシっぽい質感
ブログがダウンしてました
ブログが1日ダウンしてました
HTML5・WebGLベースのグラフィックスエンジン『Goo...
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...
WordPressのサーバ引っ越し方法を考える
Mean Stack開発の最初の一歩
FCN (Fully Convolutional Netwo...
PyMC：Pythonのベイズ統計ライブラリ
Web経由でRaspberry PiのGPIOを操作したい
書籍『OpenCV 3 プログラミングブック』を購入
Rerun：マルチモーダルデータの可視化アプリとSDK
ドラマ『ファーストクラス』のモーショングラフィックス
コメント