明解 WebGL オンラインサンプルインデックス
序文 リックテレコムより出版の「明解 WebGL」内で参照しているオンラインサンプルの一覧です。 WebGL 学習に役立ててください。 オンラインサンプル一覧 第3章 03_01.最小構成のWebGLプログラム 03_02.三角形をWebGLで描く 03_03.三角形を変形させる 03_04.複数の三角形を描く 第4章 04_01.関数化して効率よく記述する 04_02.行列による座標変換 04_03.行列による座標変換（回転） 04_04.アニメーション付きで回転させる 第6章 06_01.立体モデル（球体）を描画する 06_02.インデックスバッファを用いた描画 06_03.頂点色で着色して描画する 06_04.深度テストを有効化する 06_05.拡散光によるライティング 06_06.拡散光によるライティングをフラグメントシェーダで行う 06_07.反射光によるライティング 06_08
[WebGL] d3.js を使って作品を並べてみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS
[WebGL] d3.js を使って作品を並べてみるテスト jsdo.it 投稿1000本を記念して WebGL で作成したサンプル（約80個）を並べてみました。 ＜使い方＞ ・サムネイルをクリックすると作品が背景に表示されます。 ＜対応した点＞ ・Force Layout（力学モデルでグラフ描画するレイアウト）にて描画するよう対応 ・作品は iframe を使って背景に表示するよう対応 ＜更新履歴＞ 2017/04/08 リソースのパスを変更。 2015/03/25 新規作成 ＜表示対象の作品一覧＞ ■ [簡易版] 30行で WebGL を試してみるテスト - Fork tree http://jsdo.it/cx20/oaQC/tree ＜参考＞ ■ mbostock/d3 https://github.com/mbostock/d3 ■ D3.js - Data-Driven Doc
![[WebGL] d3.js を使って作品を並べてみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/02eb953f967e4b21d988aac8bc4c1718866fa236/height=288;version=1;width=512/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2Fl%2FK%2FJ%2FlKJh.jpg%3Ft%3D1426920520)
[js1k] GL Dragon Flight（解析結果） - jsdo.it - Share JavaScript, HTML5 and CSS
[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/http%3A%2F%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2F5%2Fi%2Fv%2F5ivN.jpg%3Ft%3D1420896880)
WebGL Water
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寄稿] JS1k 作品で見つけた WebGL 超絶圧縮コードを紐解いてみる - WebGL 総本山
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%2Fwebgl.souhonzan.org%2Fi%2Fentry%2F113_001.jpg)
GLSL ray marching を試してみるテスト - CX's Hatena Blog
昨日、Tokyo WebGL Meetup でレイマーチングなるものを教えてもらったのでスライドの内容を試してみました。 以下のサンプルは、 全能感UP! GLSLで進めレイマーチング « demoscene.jp と GLSL ray marching -フラグメントシェーダでレイマーチング- のスライドを見ながら作成しました。 その１ 「シェーダの基本となるコード」の実行結果 スライド 61 / 120 の「シェーダの基本となるコード」 その２ 「シェーダ内で ray (レイ)を定義」の実行結果 スライド 64 / 120 の「シェーダ内で ray (レイ)を定義」 その３ 「球体のサイズと distance function」の実行結果 スライド 76 / 120 の「球体のサイズと distance function」 その４ 「法線を求める関数を定義」の実行結果 スライド 87
Mozilla、クロスプラットフォームのWebGLゲームエンジン「PlayCanvas Engine」公開 | OSDN Magazine
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース（2011年3月）後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
WebGLを簡単に使うためのzero.jsを作成しました - ずっと君のターン
WebGLの登場で我らがウェブ業界にも徐々に3Dの波が押し寄せており、スプライトを利用した2Dゲームがいつのまにか3Dに駆逐されたように、3Dのできないウェブプログラマが駆逐されるのも時間の問題のようにさえ感じられます。 しかしいざWebGLを始めようと思っても、たとえば画面にドットを1つ表示しようと思っただけで <html> <head> <script src="CanvasMatrix.js"></script> <script> function main() { var domElement = document.createElement('canvas'); domElement.width = 500; domElement.height = 500; document.body.appendChild(domElement); var gl = domElement.ge
スポットライトでドット絵を描いてみるテスト - CX's Hatena Blog
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp @yomotsu さんの three.js の記事（分かりやすい！）に触発されて、個人的に苦手分野の光源について試してみました。 プログラム概要 1.ドット絵を用意する 2.スポットライトを用意する 3.スポットライトの位置と色を変えることでドット絵を表現してみる ソースコード index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello, Three.js World!</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="http
Away3D で地球を回してみるテスト - CX's Hatena Blog
○○ で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテスト JavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテスト JavaScript ９日目CubicVR.js で地球を回してみるテスト JavaScript ⇒最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回して
CubicVR.js で地球を回してみるテスト - CX's Hatena Blog
○○ で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ⇒９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテ
PhiloGL で地球を回してみるテスト - CX's Hatena Blog
○○ で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ⇒８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテ
gl.enchant.js で地球を回してみるテスト - CX's Hatena Blog
○○ で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ⇒７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテ
Babylon.js で地球を回してみるテスト - CX's Hatena Blog
○○で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ⇒６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテス
Three.js で地球を回してみるテスト - CX's Hatena Blog
○○で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ４日目WebGL で地球を回してみるテスト JavaScript ⇒５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテス
WebGL で地球を回してみるテスト - CX's Hatena Blog
○○で地球を回してみるシリーズ。 今回日程 シリーズ構成言語 １日目OpenGL で地球を回してみるテスト C/C++ ２日目DirectX で地球を回してみるテスト C/C++ ３日目Java 3D で地球を回してみるテスト Java ⇒４日目WebGL で地球を回してみるテスト JavaScript ５日目Three.js で地球を回してみるテスト JavaScript ６日目Babylon.js で地球を回してみるテストJavaScript ７日目gl.enchant.js で地球を回してみるテストJavaScript ８日目PhiloGL で地球を回してみるテストJavaScript ９日目CubicVR.js で地球を回してみるテストJavaScript 最終日Away3D で地球を回してみるテストJavaScript 追加+1Flash 版 Away3D で地球を回してみるテス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL
スポットライトでドット絵を描いてみるテスト - jsdo.it - Share JavaScript, HTML5 and CSS