Mar 28, 2016Download as PPTX, PDF3 likes2,627 views
WebGL入門ハンズオン資料
Mar 28, 2016Download as PPTX, PDF3 likes2,627 views
デザイナー・ノンプログラマにおすすめしたい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
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
Three.js is a powerful JavaScript library for creating 3D graphics in a web browser using WebGL. It allows placing 3D objects into a scene, defining a camera to view the scene, adding lighting, and rendering the 3D graphics. The basics of three.js include setting up a scene, camera, lights, geometry for 3D objects, materials, and a renderer. Examples are provided of what can be created with three.
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レンダラーを利用したバージョン) 対策としてトライアングルを外側に広げるなど色々試した
THREE.jsのソース読みサポートサイト作りました - ずっと君のターン
皆さんTHREE.jsは単なるWebGLのラッパーと思っているかもしれませんが、実際はそれだけではなくて、テクスチャローダーや視点管理用コントローラーなんかの補助クラスに加えて、スプライトやパーティクルシステムまで付いていて、たぶん見たことない人が考えているよりいろいろできます。 ただ、いかんせんまともなドキュメントがないので、それらを実際に使うには、そのクラスを使っている例を見つけて、さらにそれらが使われている部分を検索して使い方を調べるしかありません。 正直面倒くさいので、ブラウザで少しだけ楽にソースを眺められるサイトを立ち上げました。 http://threejsdoc.appspot.com/doc/index.html ただしこれはあくまでもソース読むのを手伝うためのツールです。何やってるクラスなのかとか、どうやって使うかとかは、ファイル名やインスタンス変数から推測したり、サンプ
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
WebGL best practices - Web APIs | MDN
WebGL is a complicated API, and it's often not obvious what the recommended ways to use it are. This page tackles recommendations across the spectrum of expertise, and not only highlights dos and don'ts, but also details why. You can rely on this document to guide your choice of approach, and ensure you're on the right track no matter what browser or hardware your users run. General Topics Address
JavaScript Advent Calendar/WebGLコース10日目・画像フィルターを作る - by edvakf in hatena
JavaScript Advent Calendar 2011 WebGL駅伝10日目、独走3日目になります。今からでも参加したい方がいましたらぜひ教えてください。 今日はこのオルセー美術館をTiltShiftさせてみます。実はこれがやりたくて一昨日から書いてきたのでした。 サンプルです。 http://jsfiddle.net/bHTWa/ シェーダー部分以外は9割ぐらい昨日と同じです。 シェーダー 昨日は頂点シェーダーでテクスチャーの座標をvaryingに入れてましたが、今日は別の方法でやるので、頂点シェーダーはたったこれだけです。 attribute vec2 aPosition; void main() { gl_Position = vec4(aPosition, 0.0, 1.0); } フラグメントシェーダーでは、ガウスフィルター（Gaussian Blur）のための関数を定
JavaScript Advent Calendar/WebGLコース9日目・テクスチャーの使い方 - by edvakf in hatena
JavaScript Advent Calendar 2011 WebGL駅伝9日目、独走2日目になります。今からでも参加したい方がいましたらぜひ教えてください。 さて、今日は昨日の内容を発展させて、画像を貼ってみたいと思います。 WebGLのテクスチャーとして使える画像は、通常は辺の長さが2の累乗である必要があります。ただし、やり方によってはどんなサイズの画像でも使えます。 今回は256x256で用意したこの画像を表示してみます。ただ表示するだけではおもしろくないので、色を反転させてみます。 Learning WebGLのLesson 5に似た内容です。 http://jsfiddle.net/tdUNW/1/ シェーダー 今回用意したシェーダーはこんな感じです。昨日と比べてみてください。 <script type="text/x-vertex-shader" id="vs"> // 頂
JavaScript Advent Calendar/WebGLコース8日目・二次元図形を描く - by edvakf in hatena
JavaScript Advent Calendar 2011 WebGL駅伝参加者の方々、ありがとうございました。めでたく（？）最後のランナーまで辿り着きましたので、ここからは一人で走ってみたいと思います。（気力の続く限り…） もし僕の代わりに何日か書いてもいいよという人がいましたらコメントで教えてください。 とりあえず、これまでの方々の記事へのリンクを貼っておきます。 JavaScript Advent Calendar 2011/WebGLコース初日、WebGLの基本的な考え方 - by edvakf in hatena THREE.js で WebGL | ヨモツネット 空が狭い: WebGL Advent calender 3日目 PhiloGLでのカメラの移動処理 - 強火で進め 3DCG Arts: THREE.js での輪郭線表示 ステレオ3Dビュー解説 JavaScrip
JavaScript Advent Calendar 2011/WebGLコース初日、WebGLの基本的な考え方 - by edvakf in hatena
JavaScript Advent Calendar 2011 参加者募集！ - by edvakf in hatena ↑まだまだ参加者募集中です。 WebGL駅伝は、もし25人に満たなかったら、最後の人の次の日から僕が一人で走りたいと思います。ネタと時間的余裕が続く限り… なんてことを言っておきながら、実は僕自身はWebGLも3Dプログラミングも初めて2ヶ月の初心者なので、自分がWebGLを始めるときにどういう解説が欲しかったかということを考えながら入門編を書いてみたいと思います。（WebGL駅伝の他の参加者の方々にはつまらない内容だと思いますが） WebGLプログラムの流れはおおまかに言ってこれだけです。 シェーダーを用意する 頂点座標をシェーダーに投げる フレームごとにパラメータを変えてシェーダープログラムを走らせる シェーダーは頂点（vertex）シェーダーとフラグメント（fra
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MMD on WebGL
WebGL Game Test - Three.js + impactJS