もう3年前になるけど、html5のcanvas要素を使って、画像ファイルを極力使わずにWebサイトをリッチな見た目にする方法を考えていた。当時、スマホやタブレット、ノートPCなどのモバイル端末は、日を追うごとに画面が解像度化、演算能力は向上していった。このまま進むと「ボトルネックとなるのはマシンの演算能力よりもデータ通信速度じゃないか？」って思うようになった。
端末の画面の高解像度化に伴って、より高解像度に耐えうるWebサイトが必要とされ、サイトに掲載される画像の容量は増え、ストレージを圧迫し、ダウンロードにも時間がかかる。そう考えると、大容量の画像ファイルを通信回線に載せるよりも、描画アルゴリズムだけを通信すれば良いんじゃないかって。CGで言うところのプロシージャルテクスチャのような手法を使えば、クライアント側のマシンパワーでリッチな背景を生成できるんじゃないかと。
html5のcanvasを使えば、CGを描画するのと同じように、ブラウザ上に自由にグラフィックを描画できる。当時、すでにこういうものが登場していた↓
canvasでキラキラした背景を作る方法
背景を画像ではなく乱数を使ってcanvasに円を描画する、広義のプロシージャル手法ってこと。
当時はjavascriptも知らなかったのでこれで全体像を勉強した。↓
さらに最近ではWebGL環境も整ってきて、ブラウザ上で手軽にCGが描画できるライブラリも出てきた。
jsdo.itのページ
ということで、こういう考えでWordPressテーマを自作したいのであった。
関連記事
PyDataTokyo主催のDeep Learning勉強会
ポリゴンジオメトリ処理ライブラリ『pmp-library (...
UnityでTweenアニメーションを実装できる3種類の無料...
科学技術計算向けスクリプト言語『Julia』
TensorFlowでCGを微分できる『TensorFlow...
Gource：バージョン管理の履歴を可視化するツール
OpenMesh：オープンソースの３Dメッシュデータライブラ...
iPhone・iPod touchで動作する知育ロボット『R...
OpenGV：画像からカメラの3次元位置・姿勢を推定するライ...
ブログが1日ダウンしてました
スクレイピング
ブログのデザイン変えました
ニューラルネットワークで画像分類
ドラマ『ファーストクラス』のモーショングラフィックス
機械学習手法『Random Forest』
OpenCVでカメラ画像から自己位置認識 (Visual O...
OpenSfM：PythonのStructure from ...
Live CV：インタラクティブにComputer Visi...
大河原邦男オリジナルデザイン『iXine(イグザイン)』
C++始めようと思うんだ
C++ 標準テンプレートライブラリ (STL)
Amazon Web ServicesでWordPress
UnityでOpenCVを使うには？
『手を動かしながら学ぶエンジニアのためのデータサイエンス』ハ...
Pythonの自然言語処理ライブラリ『NLTK(Natura...
UnityのMonoBehaviourクラスをシングルトン化...
Unityの薄い本
ブラウザ操作自動化ツール『Selenium』を試す
Manim：Pythonで使える数学アニメーションライブラリ
BlenderのPython環境にPyTorchをインストー...
東京オリンピックと案内表示
まだ続くブログの不調
書籍『仕事ではじめる機械学習』を読みました
TeleSculptor：空撮動画からPhotogramme...
胡散臭いデザインの参考サイト
Mechanizeで要認証Webサイトをスクレイピング
Managing Software Requirements...
AndroidもopenGLも初心者さ (でもJavaは知っ...
第1回 3D勉強会＠関東『SLAMチュートリアル大会』
Raspberry Pi 2を買いました
線画を遠近法で描く
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
コメント