読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

三角形のタイリング・フィルを実装してみた。

三角形のタイリング・フィルを実装してみた。4階調だけだと、ちょっとたりない気がするなあ。。 function sf10328749687196759801() { let doc = document.getElementById('sf10328749687196759801'); doc.height = doc.offsetWidth * 200 / 320; } window.a…

三角形フィルを作ってみた。

昨日の8色ビットマップ画面上に三角形フィルを行うコードを追加してみた。 canvasやWebGLだといとも簡単に書けるものだけど、これを自前で書いてみるという。 アルゴリズムは「多角形の塗りつぶし (3)その他の手法」を参考にした。というかほぼそのまま。 fu…

8bitコンピュータ風コンソール画面をthree.jsに移植する。

以前WebGLで作って放置していた8bitコンピュータ風コンソール画面をthree.jsに移植してみた。 function sf10328749687196045071() { let doc = document.getElementById('sf10328749687196045071'); doc.height = doc.offsetWidth * 200 / 320; } window.add…

レイマーチングを学ぶ

3Dグラフィックスもままならないのに、レイマーチングに手を出そうという。 レイマーチングとはレイトレーシングの一種だとのことだ。レイトレの高速アルゴリズム版、DFTに対するFFTのようなものか。 コードはとても簡素だけど、生成した画像をは恐ろしく…

sound - acid jam - GPUによる音声の生成?

ShaderToyはSoundタブがあって、そこでGLSLで音声処理を書くことができる。vec2 mainSound(float time)の引数が時間、返り値はステレオサンプルである。mainSound()で音声処理を書いてvec2でステレオサンプルを返せば、音が鳴る。例えば下の動画は、音声サン…

プラズマ - なんとなく書いたシェーダー・コード

昔のメガデモ等でよく見たプラズマ。これは「GLSL 2D Tutorials」のチュートリアルのコードのまんまだけれども。 3d_codes/src/00003 at gh-pages · sfpgmr/3d_codes · GitHub { let doc = document.getElementById('sf10328749687194148357'); doc.height =…

なんとなく書いたシェーダー・コード

偶然できました。 { let doc = document.getElementById('sf00002'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00002 at gh-pages · sfpgmr/3d_codes · GitHub どうも回っているものを見ると酔いますな。。ずっと見ていると遊園地のコーヒー…

ちょっとまあ、書いたシェーダー・コードの公開環境をgithub pagesに作った。

私のはShadertoyに載せるにはレベルが低すぎるので。。とりあえず1つめはこれ。 { let doc = document.getElementById('sf10328749687193382251'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00001 at gh-pages · sfpgmr/3d_codes · GitHub S…

フラグメント・シェーダー(Shadertoy)で2D Line(線分)を描く

フラグメント・シェーダー(Shadertoy)で線分を書いてみようと思った。 Shadertoyのフラグメント・シェーダーは描画するピクセルごとにmainImage(out vec4 fragColor, in vec2 fragCoord)が呼ばれる。画面のピクセル個数分このmainImage()が呼ばれるのである…

gpgpu birdsのコードをいじる

gpgpu birdsの理解を深めるために、自分の動画作成プログラムに取り込んで、コードをいじってみることにした。 いじってみた結果がこの動画。16384個の鳥を飛ばしてみた。鳥というよりは大量発生した虫のような感じだけれどもね。 これくらい動かすともうYou…

three.jsのgpgpu Birdsのコードを読む。

RYDEENカバー用の動画を作るためにthree.jsを復習していて、ようやくシェーダー・マテリアルの使い方がわかってきてちょっと楽しくなってきている。 ただまだまだ表現として稚拙だし、サンプルのパラメータやコードを少し変えてみている程度なので、もうちょ…

Digital Differential Analyzer (デジタル微分解析) でWebGL + GLSLで作ったレトロPC風画面に線分を描く - PCグラフィックスを懐かしむ。楽しむ。(21)

私はこれをブレゼンハム・アルゴリズムと同じだと思っていたけど、違っていた。 昔のPCはグラフィックプリミティブの描画が遅かったので、曲線は線分で近似していた。 例えば下の絵の顔の輪郭は曲線に見えるが、実際は線分である。 (http://85data-blog.coco…

OpenCVを使って顔認識を試みようと思う - PCグラフィクスを楽しむ。懐かしむ(19)

40x25サイズのキャラグラでなんとか動画表示ができた。 blog.sfpgmr.net 元となる動画は五十音を順にしゃべる女性だ。これを各音ごとに細切れにして、カタカナをあたえればその通りに発音できるようにしたいと考えた。自作音源をバックにラップさせてみたい…

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで動画表示を行う - PCグラフィックスを懐かしむ。楽しむ。(18)

40x25の8色キャラ画面で、チェッカーキャラクターを使った動画表示を行ってみた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160423/ ソースコード: GitHub - sfpgmr/graphics at d2cd41906d229c3244c4725b37e3b8dbeb8877e3 動画の素材は以下…

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで正多角形を描き回転させる - PCグラフィックスを懐かしむ。楽しむ。(17)

正多角形の描画は何とかできた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160422/ ソースコード: GitHub - sfpgmr/graphics at a5818c1534ff5922243f6c3c8a8b990a02ab169d 指定した角数の多角形を描くようなコードにしてみた。三角形未満は…

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで正方形を描き回転させる - PCグラフィックスを懐かしむ。楽しむ。(16)

今回は正方形を回転させつつ、グラデーションするアニメーションをやってみた。 動くデモ: http://github.sfpgmr.net/graphics/devver/20160421/ ソースコード: https://github.com/sfpgmr/graphics/tree/b64b9550597aee383242780c800fcf76c6b536ae パター…

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラで円を描く - PCグラフィックスを懐かしむ。楽しむ。(15)

そういうわけで流れはキャラグラへ。まず作ってみたのがこれ。円と矩形が交互に描画される。静止画だと「なんだこれ」だけど、動くものを見てもらうと残像の効果によってグラデーションがかかっているように見える。 でも矩形はいまいちだなぁ。 動くデモ: …

WebGL + GLSLで作ったレトロPC風グラフィックス画面で、キャラグラを始める - PCグラフィックスを懐かしむ。楽しむ。(14)

MZ-700の文字キャラクタを表示するようになってやる気が少し出てきている。といいつつ音源整備に力を入れてしまうというあまのじゃくさ。 ここ数日MZ-700界隈の記事を読んでいて、キャラグラというのに非常に興味を持った。このキャラクタを使って現在のJS環…

WebGL + GLSLで作ったグラフィックス画面に、Web Audioで作成した波形メモリ風音源を加えた。 - PCグラフィックスを懐かしむ。楽しむ。(12)

少し時間がかかったが、音源を加えることができた。まだとりあえずのバージョンで、ドラム音はまだ鳴らない。 デモページ: http://github.sfpgmr.net/graphics/devver/20160417/index.html ソースコード: GitHub - sfpgmr/graphics at fffaeab29fb72ccd4d1…

WebGL + GLSLで作ったレトロPCグラフィックス画面に、Web Audioで音源を加えることにする。 - PCグラフィックスを懐かしむ。楽しむ。(11)

ちっともプリミティブの描画に移らないところが私らしいというか。 MZ-700フォントを表示してキャラグラ的なものに少し目覚め、ちょっとしたデモを行き当たりばったりに作ってみようとしている。 下は作りかけ。 デモページへのリンク: http://github.sfpgm…

WebGL + GLSLで、レトロPC風の文字キャラクタを表示する - PCグラフィックスを懐かしむ。楽しむ。(10)

プリミティブの描画の前に、この環境での文字表示を作るのを忘れていたので、作ることにした。 VRAMプレーンで行ったことを応用すればできるはずだ。 デモページ: http://github.sfpgmr.net/graphics/devver/20160410/index.html ソースコード: https://git…

WebGL + GLSLでレトロPC風グラフィックスメモリ(RGBプレーン)の再現ができた - PCグラフィックスを懐かしむ。楽しむ。(9)

RGBのプレーンの再現だがなんとかできた。 デモページ:http://github.sfpgmr.net/graphics/devver/20160408/index.html ソースコード: GitHub - sfpgmr/graphics at 98af700d92b169b8449067b619c8c5baa7310d30 以下のような仕様でソースを書いてみた。 R/G…

WebGL + GLSLでレトロPCグラフィックスメモリのRGBプレーンの再現ができないか? - PCグラフィックスを懐かしむ。楽しむ。(8)

ようやく8色パレット描画のエミュレートができたが、これで満足したわけではない。今の仕組みではピクセルあたり1バイトを割り当てていて、これの0-7だけ、つまり3ビットだけ使っている。この無駄を減らしたいし、もう少し昔の環境に近づけたい。なのでなん…

WebGL + GLSLによる8色パレットカラーエミュレート画面がようやく完成 - PCグラフィックスを懐かしむ。楽しむ。(7)

いろいろなサイトを参考にしながらようやく完成した。runをクリックすると、8色の縞模様がスクロールしているように見えるはずだ。 デモページ: http://github.sfpgmr.net/graphics/devver/20160406/index.html ソースコード: github.com このようなデモを…

8色パレットカラーをWebGLでエミュレートするアイデアその3 - PCグラフィックスを懐かしむ。楽しむ。(6)

8色パレットカラーをWebGLでエミュレートするアイデアだが、どうもその2もうまくいかなそうである。 私はフラグメント・シェーダーでuniform変数の配列でパレットを持てばよいと考えていた。でも残念ながらフラグメント・シェーダーでは配列のインデックス…

8色パレットカラーグラフィックスをWebGLでエミュレートするアイデアその2 - PCグラフィックスを懐かしむ。楽しむ。(5)

寝ても覚めてもというほどでもないが、極力GPUを使って8色パレットカラーをエミュレートする方法を考えている。 ビット演算をJavaScriptにさせるアイデアはコストが高い感じがする。Chrome CanaryやFirefoxではオプション設定でWebGL 2.0を動かすことが…

WebGL 1.0のGLSLでは整数ビット演算を自在に行うことはとても難しい。- PCグラフィックスを懐かしむ。楽しむ。(4)

そういうことで、WebGLをセットアップし、三角形1枚を描いてみた。 window.addEventListener('load',function(){ var cont = document.getElementById('g20160330'); if(cont.offsetWidth > 700){ cont.height = 810; } else { cont.height = 550; } }); ソ…

レトロPC風環境再構築のためにWebGLを学び、8色カラーグラフィックスをGLSLでエミュレートするアイデア - PCグラフィックスを懐かしむ。楽しむ。(3)

レトロな8色パレット、320x240pxの画面を作成すべくWebGLを下記サイトで勉強している。最新のWebグラフィックAPIをうまく使ってレトロな画面をどうにかして作れないかという、本末転倒な感じがなんとも。画面サイズはひょっとしたら256x192ドットにするかも…

WebGLでのレトロPC風8色カラーグラフィックス環境に作り直す - PCグラフィックスを懐かしむ。楽しむ。(2)

タイニーPのブログを読んでいる。 tiny-p.cocolog-nifty.com 1980年~1985年あたりが一番面白い。やっぱり一番PCに熱中した時代だから。私の知らないPCの話も出てきて、私の知識なんてまだまだ甘いなぁとか思ったり。 これを読んでいると8色パレット付きのグ…

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

昨日はグラフィックスを懐かしむための環境作りを行っていた。以下の画面がそうである。実行するとカラーパターンのようなものが表示されるだけだが。これを使って過去に勉強したことを振り返りつつ実装した結果を実行可能な形で残していこうという試みであ…

グラフィックスルーチンのおさらいもしたいね。

昨日WebGLの勉強をすると書いたが、もう少しさかのぼって昔のグラフィックスルーチンのおさらいもしたくなってきた。canvasを使ってラインとかサークルとか、ペイントとかのおさらいをしたいなと。そういうグラフィックスプリミティブの描画も、いろいろ勉強…

WebGLを勉強しようと思う。

下記のサイトで勉強しようと思う。 wgld.org 普段はThree.jsで遊んでいる。Three.jsは昔でいうところの「Direct3D Retained Mode」のようなものである。3Dをかじるものであれば昔でいうところの「Direct3D Immediate Mode」にあたる「WebGL」はやっぱりおさ…