James Stanley - Nightdrive
I've made a JavaScript simulation of driving at night time on the motorway. It's hard to classify what it is. It's not a video, because it's generated dynamically. It's not a game, because you just watch. It's not a screensaver, because it's not the 90s. Maybe it's a "demo"? This is something I've been planning to make for years, but kept forgetting about. I would only remember it when in the pass
HoloLensの開発環境構築手順 Blender(glTF-Exporterアドオン)編 - MRが楽しい
本日は環境構築の手順枠です。 Blender のアドオンインストール手順をまとめます。 bluebirdofoz.hatenablog.com Blender の glTF 関連アドオンのインストール手順を記録します。 ここで適用するのは以下のgltfファイル形式のエクスポーターです。 ・gltf-Blender-Exporter gltf-Blender-Exporter についてです。 本アドオンは glTF ファイルのエクスポート機能を提供します。 glTF は KHRONOS GROUP が提供する3Dフォーマットです。 www.khronos.org qiita.com gltf-Blender-Exporterは以下の Github で公開されています。 github.com CloneOrDownload -> DownloadZIP でファイルをダウンロードできます。 ……
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！
WebGLの現状と未来を、Grimoire.jsを生んだスーパークリエータに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、東京理科大学4年の石井翔さんです。 石井さんのセッション「WebGLの今とこれから ~今のWeb開発で使うからこそ知っておきたい周辺技術~」に関するスライド資料は、こちらで公開されています。 スライド資料 （注: 重いのとモバイルから見えないのはご容赦ください by 石井翔さん） 白石: 本日は取材をお受けいた
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
ブラウザで3Dコンテンツを作るなら？Unity WebGLとA-Frameのパフォーマンスを比較してみた - VOYAGE GROUP VR室ブログ
初めまして、今年の１月よりVR室にインターン生としてお世話になっている takapikoX です。 今回、UnityとA-Frameで作ったWebGLによる3Dコンテンツについて、簡単な性能比較を行いました。 目次 今週のお題「私の沼」 目次 ブラウザ上で3次元コンピュータグラフィックスを扱うには 対応状況 A-Frame と Unity を比べる意味 実行環境 今回作ったサンプル サンプル１ サンプル２ サンプル３ 何を比較するのか 読み込み時間の比較 FPSの比較 実際の比較 サンプル１での比較 サンプル２での比較 サンプル３での比較 結果 モバイル端末での利用を見据えて ブラウザ上で3次元コンピュータグラフィックスを扱うには ブラウザ上で3Dグラフィックスを実装するには、WebGLというJavaScript APIによって、ブラウザを通してデバイスのGPUにアクセスする必要があります
three.jsによる WebGLワークショップ
【第２部】 ライティングとシェーディング １. シェーディングの基本 ２. 反射材質モデル ３. 様々な光源によるライティング ４. シャドーイングの基本 シェーディングとは？ 「シェーディング」とは日本語で「陰影づけ」の意味 人目に映る物体の質感 ＝ 反射光 シェーディングに必要な要素 「①反射材質」と「②光源」の２つの要素で決定！ ①反射材質の用意 「TrackBallControls.html」に変更を加えていきます！ 材質オブジェクトを「ランバート反射材質」に置き換えます //ランバート反射材質の準備 var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 });
今話題の3Dファイル形式「glTF」でWebGLの表現力を高めよう！ - Qiita
この記事は WebGL Advent Calendar 2016 の６日目の記事です。 ※glTFフォーマットの現在の最新バージョンは「glTF2.0」です。本記事はglTF1.0について書かれた記事ですのでご注意を。1.0と2.0は互換性がなく、少なからず相違点があります。glTF1.0のアセットは現在ほとんど流通していないため、本記事は参考程度にしてください。 glTF2.0に対応した記事はこちらになります。まだ未完成ですが随時加筆していきます。 はじめに 〜 glTFとは 〜 glTF (The GL Transmission Format)とは、OpenGL系のAPI (WebGL, OpenGL ES, OpenGL) と親和性の高い、ランタイム用途向けのアセットフォーマットです。 特にWebGLにとっては、特定ライブラリに依存しない、本格的な汎用３Dフォーマットの決定版とも言え
GPU本来の性能を引き出すWebGL頂点データ作成法 - Qiita
この記事はWebGL Advent Calendar 2015の９日目の記事です。 ご注意 本記事は2015年当時に書いた記事なのですが、GPUがGeForce 8x00シリーズ以降、SIMDからSIMTという並列実行形式に切り替わった頃から状況が大きく変わりました。 以前は本記事でも紹介するインターリーブ形式の頂点データの方が高速だったのですが、現在のGPUでは多くの環境で非インターリーブの方が高速とされています。 AMD GPUにおいても、GCNアーキテクチャ（PS4以降の世代）から（それまでのVLIWから）SIMTに切り替わり、非インターリーブを推奨されているようです。 WebGLは基本的にネイティブ3D APIへのマッピングに過ぎないため、この傾向はおそらくWebGLでも同様と考えられます。 とはいえ、インターリーブ(AoS)や非インターリーブ(SoA)はCGをやる上でいずれ避けて
レイマーチングで潜れる雲を作る - Qiita
この記事は，WebGL Advent Calendar 2016 20日目の記事です。 doxasさんやgam0022さんのレイマーチングの作品を見て面白そうだったので挑戦してみようと思います。 目的 ところでこの記事を見ている方はエースコンバットというゲームをご存知でしょうか。 超遠距離のオブジェクトや、雲や煙のような形が定まっていない物ばかりが描画されるゲームです。 プログラミングを学び始めた頃は、こういったものがどうやったら表示出来るのか全くわかりませんでしたが、今なら少し再現できそうです。 そこで、今回はその第一歩としてレイマーチングの力を借りて、リアルな雲を描画してみたいと思います。 方法 「よし、レイマーチングでボリュームレンダリングをしよう！」と思っても、よく考えたらなにをしたら良いのかわかりません。 というかボリュームレンダリングって何？ https://ja.wikipe
米Microsoft、EdgeブラウザのWebGL実装をオープンソースとして公開 | OSDN Magazine
米Microsoftは6月9日、「Microsoft Edge」ブラウザでのWebGL実装をオープンソースで公開したことを発表した。GLSL（OpenGL Shading Language）からDirectX向けシェーディング言語HLSL（High Level Shading Language）へのトランスパイラのコードなどを公開することで、相互運用性問題の解決を容易にすると狙いを説明している。 EdgeはMicrosoftが「Windows 10」で導入したWebブラウザ。Edgeではすでに、JavaScriptエンジン「Chakra」をオープンソースとして公開している。今回公開されたのは、Edgeで3Dコンテンツのレンダリングを行うコンポーネントとして使用しているWebGL実装の一部。Webブラウザや関連したアプリケーションを開発する開発者向けのリファレンスと説明しており、テストコード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
頂点配列
[OpenGL] 任意の頂点形式に対応可能な頂点バッファオブジェクトの設定方法
https://twitter.com/old_pgmrs_will/status/1585284217180606464
Nightdrive
GitHub - KhronosGroup/glTF-Blender-Exporter: Moved to https://github.com/KhronosGroup/glTF-Blender-IO.
glTFのデータってどうやって作ればいいのか？ - 新 masafumi's Diary
GitHub - aike/webaudiosynthv2: Web browser based synthesizer application
Web Audio Synth V2
Microsoft、オープンソースの3Dグラフィックフレームワーク「Babylon.js 3.0」をリリース
nunuStudio