Tone.jsとp5.jsで音の発生を可視化する - 虎の穴開発室ブログ
こんにちは、年末年始に新しくWindows10の自作PCを組んだ虎の穴ラボのおっくんです。 昨年から、Web audioを取り扱うライブラリとしてTone.jsを使って、 ブラウザで音を鳴らしたりということをしていたのですが、一歩進んで再生する音を可視化したいと思いました。 可視化の方法としては、発生させる音を文字で表示するということもできるのですが、 今回は音楽再生ソフトの視覚エフェクトをイメージして作成することにしました。 Web audioを扱うTone.jsとCanvasを扱うp5.jsの2つライブラリを使用して、円環状に配置した音程に対応したバーが伸び縮みするアニメーションをCanvasに表示させます。 完成したページは以下のようになります。 音楽再生アプリの画面 完成品はこちらアップロードしておりますので、ぜひ見てみてください。 開発環境 OS MacOS Mojave バージ
WebGL入門ハンズオン資料
WebGLハンズオンを行った時の資料です。 http://connpass.com/event/25563/Read less
ニューラルネットワークを活用した文字認識のプロセスを三次元で可視化した WebGL デモがすごい！ - WebGL 総本山
手書き文字の認識が違った意味でよく見える！ 今回ご紹介するのは、ニューラルネットワークを活用し二次元平面上に描かれた模様から、数字として認識される様子を可視化した、面白いデモンストレーションです。 私は残念ながらこの手の学がまったく無く、正確に解説することが難しいのですが、Convolutional Neural Network というものを使って文字を認識するような、特殊なアルゴリズムを可視化しているのだと思います。 階層構造になった状態に、どのようなつながりがあるのかを可視化するのには三次元表現がうってつけですね。 数字を描いてみるだけでも楽しめる 先に触れたとおり、私はこういった学問の知識がないのでものすごく初歩的なことや、間違ったことを書いているかもしれません。その点はご了承ください。 今回のデモを見ると、文字認識のためのニューラルネットワークが、どのように機能しているのか、その一
Tokyo WebGL Meetup #2
ハードウェア特性に基づいた WebGL 高速化手法 WebGL fast method that is based on hardware characteristics WebGL 高速化のためのテクニック、ハードウェアの特性を良く知った上で速く動く WebGL コンテンツを作るためのノウハウをお伝えします。 An introduction to how do we make WebGL contents with better performance, accoding to the hardware spec and compatibility. 北海道生まれ。株式会社エクサ コンサルティング推進部所属。 三次元コンピュータグラフィックス関連、ユーザエクスペリエンスデザインを専門とする。 Web を含む情報家電からスマートフォン、巨大立体視シアターまで、多岐にわたったCG、ユーザーイ
アニメっぽいエフェクトを生成したい - ポルノアニメ
クリスマスだしたまには便利な記事でも書く。 以前少し書いた、ゲームにアニメ風のエフェクトを入れたいという話。アニメ風というのは例えば こういう光線や光輪を指す。ポイントとしては、わざと線の太さを不安定にしたり途切れ途切れにして躍動感を出す、という所。 さて、まず光輪からいくと、左上に(0,0)、右下に(1,1)のテクスチャ座標を指定した矩形ポリゴンを用意する。（次の画像だけ、u,vを赤と緑に割り当てている） 中心が(0.5,0.5)なので、フラグメントシェーダー上でテクスチャ座標と(0.5,0.5)の距離をとって、ある閾値を超えたらdiscardすると円形になる。 void main() { vec2 rpos = v_texCoord - vec2(0.5, 0.5); float r = length(rpos); if (r > 0.5) { discard; } gl_FragCo
デザイナー・ノンプログラマにおすすめしたいThree.jsのカンタン3D体験 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
WebGLことはじめ
WebGL Tokyo Meet upで話したスライドです。 WebGLのセットアップからGLSLなどの、Hello Worldをざっくりと解説しています。Read less
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さんからコメントで、ジオメトリの作成部分で最適化が足りない旨の指摘を頂きました。ジオメトリを無駄
Happy Elements Labs: 150行でここまでできる！Three.jsによる3Dタイピングゲーム
カメラ # PerspectiveCamera以外にOrthographicCameraがあります。 # 引数: 視野角（垂直）、描画範囲の縦横比、カメラから一番近い描画点、カメラから一番離れた描画点 @camera = new THREE.PerspectiveCamera(40, document.width / document.height, 1, 10000) # カメラの位置 @camera.position.y = 300 @camera.position.z = 1000 レンダラー（sceneの描画を行うためのオブジェクト） # WebGLRenderer以外にCanvasRenderもあります。 # 引数のオプションは下記を参照 # https://github.com/mrdoob/three.js/wiki/WebGLRenderer @renderer = new
WebGL and Three.js
Colin Barre-Brisebois - GDC 2011 - Approximating Translucency for a Fast, Che...Colin Barré-Brisebois
Construct 2 the HTML5 Game Maker - Scirra.com
Construct 3 Create stunning games in the worlds best 2D game engine
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
HTML5の3Dエンジン「Three.js」の物凄いボリュームの日本語チュートリアル
HTML5による物理シミュレーション環境の構築 - WebGLライブラリThree.js入門 (遠藤理平 | ナチュラルサイエンス) WebGLのJavaScriptライブラリ「Three.js」の日本語のチュートリアルが公開されています。 全部で３部のようですが、現時点では１部だけが公開されています。
WebGLで2Dの処理を行う入門記事「WebGL Fundamentals」 - 強火で進め
HTML5 Rocks - WebGL Fundamentals http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ サンプルコードはこちらからダウンロード出来ます。 /www.html5rocks.com/content/tutorials/webgl/webgl_fundamentals/static/webgl/ - html5rocks - ...see why.html5rocks.com - Google Project Hosting http://code.google.com/p/html5rocks/source/browse/www.html5rocks.com/content/tutorials/webgl/webgl_fundamentals/static/webgl/?r=daa158
HTML5周辺技術のWebGLとJavaScriptでジニーエフェクト | ClockMaker Blog
JavaScriptでMac定番のジニーエフェクトを作ってみました。今回利用したのはHTML5周辺技術のWebGLというもので、プラウザネイティブでGPUを利用できる機能です。 デモを見る (2023年バージョン) デモを見る (2012年バージョン) ※2023年にデモをThree.js r151で動作するようにメンテナンスしました。 WebGLとCanvasの違い 今回はWebGLを使っているため再生可能な環境が限られています。本当は再生できる環境を増やすためにWebGLではなくCanvasタグを利用したかったのですが、Canvasタグだとアンチエイリアスの限界で「ヒビ割れ」が発生して完成させることができませんでした。 失敗作A (自前で作成したバージョン) 失敗作B (Three.jsのCanvasレンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ZeroGram ゲームプログラミングの素
WebAssembly is here! – Unity Blog
MMD on WebGL
WebGL Game Test - Three.js + impactJS