Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった - razokulover publog
Threejs+WebAudio APIで勉強がてらオーディオビジュアライザーをつくった。 成果物↓ 修正はしたが、音量少しデカいかもしれんので注意 threejs-audio-visualizer 背景 2017年1~3月の振り返りで次にやることとして3Dコンテンツを作りたいということを書いた。 その折、ちょうど業務でThree.jsを使う機会があったのでこの際勉強してみるかーということで取り掛かることにした。 やったこと とりあえずは「初めてのThree.js」を電子版で買って、3日くらいかけて読んでみた。 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ 作者:Jos DirksenオライリージャパンAmazon 一応サンプルソースを動かしながら、カメラ・シーン・ジオメトリ・マテリアル・テクスチャ・メッシュ・レンダラー・ライトという各構成要素
Three.js r83で何が変わったのか - 株式会社カブク
はじめに 想定より遅くて今月はもう出ないかと思っていたThree.jsのr83がやっと出たので、この際なので突如欠員が出たThree.js Advent Calendarの一記事ということにしてざっくり変更点をまとめます。Advent Calendarがなくてもどのみち同じようなエントリを上げていたと思いますが。 要点 大きいのは遂にWebGL2Rendererが入りWebGL2対応が正式に始まったことでしょうか。FirefoxもChromeも次のバージョンからWebGL2がフラグなしで有効になるようなので、我々開発者も少しずつ慣れておいたほうがいいかもしれません。WebGL2以外では今回から追加された面光源も場所を選べば効果的に利用できそうでうれしいところです。 コードの変更点 ということで以下、r83のリリースノートの要約です。 バグフィックス Audio回りの不具合が修正されたようで
Three.Js で、「プレイエリアの外です」のアレを再現する - Qiita
この記事は、Three.js Advent Calendar 2016 5日目の記事です。 ほんの２ヶ月前・・2016年10月のことでしょうか。PSVRの登場とともに世間を賑わせた、「プレイエリアの外です」現象は。 一番有名になった画像については、「スカートの中を覗こうとした場合に、おぱんてぃの場所を防ぐように表示されている」あの警告でしょう。 実際に警告が表示される条件には、「プレイヤーを外から撮影している子機カメラの撮影範囲外になる」という事だそうですので、別にぱんつを覗く行為が禁止されている訳ではなかった、らしいのですが、画像のインパクトのお陰で広まったようです。 という予防線な駄文はどうでもいいですね。自分がやりたいのは、まさしくアレです。「パンツを覗こうとしたら、パンツの位置に警告が表示される」、それはそれは人類男子にとって何の役にも立たない機能です。 役に立たないことこそ全力。
Three.js r82で何が変わったのか - 株式会社カブク
はじめに 皆さんこんにちは、カブクの近接戦闘担当のあんどうです。先週はXガードと50/50を覚えました。主に個人メモとしてThree.jsの10月リリースの内容をまとめます。 要点 今月も大きな変更があるようには思えませんが、three.modules.jsも追加されてES6モジュール対応がどんどん進んでいる感じです。「初めてのThree.js 第二版」はまだ行けると思いますが、そろそろ全サンプルコードの動作を確認して、問題があるようなら修正版をアップしたいです。 コードの変更点 ということで以下、r82のリリースノートの要約です。 three.js ES6モジュールのビルド、three.modules.jsが追加されました。（#9597） Clock getElapsedTime()が前回実行時からの経過時間ではなく、初回実行時からの経過時間を返すという不具合が修正されました。 （#96
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
6/25の技術書典で、AZ異本（アツイホン）を出します！ - gam0022のブログ
6/25（土）に秋葉原で開催される技術書展で新刊を出します！ 技術書展とは、技術書オンリーイベントのことで、技術書限定のコミケのようなイベントです。 techbookfest.org 新刊のタイトルは、AZ異本（アツイホン）です！ techbooster.github.io AZ異本には（熱い本|厚い本|AtoZ、AからZまで多種多様な|異本：普通の本とはちょっとちがう）みたいな意味が込められてます。 今回も技術書サークルTechBoosterからの参加です。C89の冬コミに続いてレイマーチングの記事をかきました。 「レイマーチングの世界でミクが踊る！『レイマーチング×ラスタライザ』ハイブリッド描画 with three.js」という記事をかきました！よろしくお願いしますー！ https://t.co/JBcK5NlwTC— がむ (@gam0022) 2016年6月20日 レイマーチング
今年もやります！ 短期集中 GLSL スクール 2016 受講者募集開始！！ - WebGL 総本山
2016 年 10 月開講 GLSL は WebGL や OpenGL で利用できる シェーダ記述言語 です。近年では、WebGL や Unity などのゲームエンジンの普及に後押しされるように、GLSL を利用する場面がこれまでには無かったようは広がりを見せています。 ハイエンドなゲームや CG 作品の制作・創作に利用されてきた GLSL は、今日ではより気軽で身近なものになりつつあります。これは WebGL の登場によって決定的になりました。ウェブブラウザという誰にとっても馴染み深いアプリケーション上で、自分自身の記述したシェーダが軽やかに動いている様子はなんとも心地よいものです。しかもそれが、インターネットを通じて世界中に配信できるわけですから、すごい時代だなと感じます。 本スクールは、そんな GLSL を利用したクリエイティブなシェーダコーディングを学ぶことができるスクールです。
WebGL開発に役立つ重要な三角関数の数式・概念まとめ （Three.js編） - ICS MEDIA
3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する 地球をモチーフにしたサンプル
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
Intro to Pixel Shaders in Three.js — Airtight Interactive
I recently started playing with shaders in three.js and I wanted to share some of what I’ve discovered so far. Shaders are the ‘secret sauce’ of modern graphics programming and understanding them gives you a lot of extra graphical fire-power. For me the big obstacle to learning shaders was the lack of documentation or simple examples, so hopefully this post will be useful to others starting out. T
HTML5関連技術のWebGL(three.js)とFlash(Away3D)のパフォーマンス比較 | ClockMaker Blog
HTML5関連技術であるWebGL (three.js ライブラリを使用)でどれだけのオブジェクトを表示できるのか気になったので、Flash(Away3Dライブラリを使用)とパフォーマンスを比較してみました。WebGL対応ブラウザであるGoogle ChromeやFirefox等でご覧ください。 HTML Demo (Primitive Version) HTML Demo (Primitive Version Ex) HTML Demo (Optimum Version) Flash Demo (Primitive Version) Flash Demo (Optimum Version) 訂正 ※[2013/01/16 23:50追記] 匿名さんやthree.jsの開発者であるMr.doobさんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL2Renderer · Issue #9965 · mrdoob/three.js
THREE.ShaderMaterialで自動挿入されるuniform/attribute（three.js r81）
Release r78 · mrdoob/three.js
Release r76 · mrdoob/three.js
Release r75 · mrdoob/three.js
Release r74 · mrdoob/three.js
http://gam0022.net/misc/raymarching/reflect.html
Added raymarching reflect example. by gam0022 · Pull Request #7860 · mrdoob/three.js
Redirect