WebGLでレトロPC風のグラフィックス環境を作る - WebGLでレトロPCグラフィックスを楽しむ(1)

公開:2016-03-27 10:17
更新:2020-02-15 04:37
カテゴリ:ハードウェア,PCグラフィックス,javascript,html5,webgl,glsl,WebGLでレトロPCグラフィックスを楽しむ

昨日はグラフィックスを懐かしむための環境作りを行っていた。実行するとカラーパターンのようなものが表示されるだけだが。これを使って過去に勉強したことを振り返りつつ実装した結果を実行可能な形で残していこうという試みである。JSFiddleとか最初使おうかなと思ったけど、ちょっと望み通りのことができなかった。

動作サンプル

新しいウィンドウで開く

ソースコード・リソース

/dev/graphics/devver/20160327/css/sfstyle.css

/dev/graphics/devver/20160327/index.html

/dev/graphics/devver/20160327/js/bundle.js

/dev/graphics/devver/20160327/test.html

この環境での表示画面は以下の仕様で作られている。

画面描画周りの仕様は、以下のとおりである

画面サイズは、ピクセルを際立たせるためにあえて小さいサイズにして、レトロな時代の雰囲気を作るようにしている。でも1980年当時くらいからしたら、フルカラー+αでピクセル操作できる時点で驚愕のグラフィック仕様だし、JS+Webの環境で動かしても当時アセンブラで動かしていたときよりも高速に動かすことができるだろう。8色+パレット機能くらいが始めるにはよさそうだけど、ちょっと面倒なので妥協した。ただこの仕様だとパレット機能とか、当時のPCのグラフィックス機能を使った技法の再現ができない。再現不可の機能は別途そういう環境を作って再現しようと思う。WebGL+シェーダーを使えばエミュレートは可能なのでないかと思っているし、レトロPCのソフトウェア・エミュレータもたくさんあるので、そのような環境を使って再現しても面白いかもしれない。

今後であるが、線描画、矩形描画、円描画、楕円描画とかプリミティブなものをピクセル単位でどのように描画するかを過去の経験とか文献とかを調べてこの環境でできる限り再現していくことにする。 飽きるまでだけどね。