[js1k] GL Dragon Flight（解析結果） この作品のポイントは、以下の圧縮用コードにあるかと思います。 ＜圧縮用コード＞ for(i in g) { g[i[1]+i[7]+i[i.length-1]]=g[i]; } この処理は長い WebGL の API を3文字化することで効率的なコード圧縮を実現しているようです。 圧縮前： bindBuffer(ARRAY_BUFFER, createBuffer()); 圧縮後： ifr(RUR, rur()); ＜対応表＞ RUR : ARRAY_BUFFER = [34962] ESR : VERTEX_SHADER = [35633] RES : TRIANGLES = [4] rur : createBuffer = [function createBuffer() { [native code] }] rrm : cr
![[js1k] GL Dragon Flight（解析結果） - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/97970a9eaf3c76f11ee265079d0530b11180f683/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2F5%2Fi%2Fv%2F5ivN.jpg%3Ft%3D1420896880)
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
WebGL 総本山寄稿記事第二弾！ 今回は、jsdo.it などを中心に、尋常ではない量のサンプルやデモを多数公開されている @cx20 さんから寄稿いただきましたので掲載させていただきます。 今回のテーマは javascript の圧縮。js1k と呼ばれる、1 キロバイト以下の容量でデモを作り完成度を競うイベントから、コード圧縮のテクニックについて抜粋して解説してくださっています。 WebGL の冗長なメソッド名が非常に短くなるというテクニックで、幅広く使える技術というわけではないかもしれませんが、コードを手入力で圧縮する方法としてすごく斬新なアイデアだなと思いました。 以下、寄稿記事です。 JS1k で見つけた超絶コード JS1k（js1k.com）という大会をご存じでしょうか。 この大会は、名前にあるように、1キロバイトの JavaScript でゲームやデモを競う大会になります。
![[WebGL寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる - WebGL 総本山](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee7d48fba20ce406cd8413f678798b3d483e1dc1/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwebgl.souhonzan.org%2Fi%2Fentry%2F113_001.jpg)
昨日、Tokyo WebGL Meetup でレイマーチングなるものを教えてもらったのでスライドの内容を試してみました。 以下のサンプルは、 全能感UP! GLSLで進めレイマーチング « demoscene.jp と GLSL ray marching -フラグメントシェーダでレイマーチング- のスライドを見ながら作成しました。 その１ 「シェーダの基本となるコード」の実行結果 スライド 61 / 120 の「シェーダの基本となるコード」 その２ 「シェーダ内で ray (レイ)を定義」の実行結果 スライド 64 / 120 の「シェーダ内で ray (レイ)を定義」 その３ 「球体のサイズと distance function」の実行結果 スライド 76 / 120 の「球体のサイズと distance function」 その４ 「法線を求める関数を定義」の実行結果 スライド 87
最近、お気に入りのサイトで GLSL Sandbox Gallery というサイトがあります。 何のサイトかと言うと、平たく言うと「プログラミングによるお絵かき投稿サイト」になります。 ちょっと特殊な点としては「GLSL 言語」という GPU 向けのプログラミング言語（シェーダ言語）で書く必要があるという点があります。 自分もサッパリ理解出来ていないのですが、過去の投稿作品のノウハウを参考に、ドット絵を描いてみることにしました。 サムネイル URL 説明 http://glslsandbox.com/e#14511.0 色付き四角形 http://glslsandbox.com/e#14512.0 複数の四角形 http://glslsandbox.com/e#14516.0 ドット絵 http://glslsandbox.com/e#14919.0 ドット絵をウネウネさせてみる http
これはTokyo Demo Fest 2014(http://tokyodemofest.jp/2014) の7 Lines GLSL Graphics Compoのチュートリアルです。 7 Lines GLSL Graphics CompoではGLSLのFragment Shaderを用いて7行(7x80 characters)で グラフィックスを表示します。 すべての作品は最新のGLSL sandboxで表示します。 GLSL sandboxについて GLSL sandboxについては以前にも記事(http://www.demoscene.jp/?p=1154)で紹介されました。 GLSL sandboxはwebGLによりglslを用いてシェーダーを記述・確認できるサイトです。 やってみよう http://glsl.heroku.com まず、はじめに"Create new effec
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
