3D初心者の俺がThree.jsの基本をオススメ本とともにザーッとおさらいする記事 - Qiita
WebGL Advent Calendar 2014の13日目の記事です。 3Dのスキルなんてものは1mmもないわたくしが、お勉強したログをまとめてみます。 Three.jsのバージョンは68時点のものです。 参考にしたもの three.jsのドキュメント three.jsのサンプル three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界 ドキュメントとサンプルがしっかりしてるので、それだけでも事足りそうだけど、本を読んだほうが早い。記事中で上巻と書いているのはこの本のことです。ただし、2013年9月に出版されたものなので、ちょっと古いところもあります。 Three.jsの超基本 こんなノリだと動く！ renderer作成 scene作成 camera作成 lightをsceneに置く meshをsceneに置く meshは素材のma
three.jsの組み込みuniform/attributeの紹介 - Qiita
この記事は、Three.js Advent Calendar 2016 8日目の記事です。 はじめに みなさんはthree.jsのカスタムシェーダを使った経験はありますか？ three.jsでは、THREE.ShaderMaterialからカスタムシェーダを利用できます。具体的にはTHREE.ShaderMaterialのコンストラクタで頂点シェーダとフラグメントシェーダを指定してMaterialを生成できます。 THREE.ShaderMaterialと似たようなクラスにTHREE.RawShaderMaterialがあります。 THREE.ShaderMaterialではビルドインのuniform/attributeの定義がシェーダの先頭に挿入されますが、THREE.RawShaderMaterialでは挿入されないという違いがあります。 three.jsでカスタムシェーダをバリバリ使
threejsでGLSLをいじるための基礎知識 - Qiita
バーテックスシェーダーでは全部使える。 フラグメントシェーダーでは,viewMatrixとcameraPositionのみ使える。 フラグメントシェーダー側で使うときはバーテックスシェーダ内でvarying変数に一旦いれたりする。vUv=vu; みたいな感じで。 threejsからuniform/attributeを渡すとき指定する文字列(type) よくつかいそうなのは i (整数) f (float) v2 (THREE.Vector2) v3 (THREE.Vector3) v4 (THREE.Vector4) c (THREE.Color) m4 (THREE.Matrix4) t (THREE.Texture) var uniformsExample = { "uInt" : { type: "i", value: 1 }, // single integer "uFloat"
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
Three.js対応。Webブラウザ上で3Dモデルを作成·ThreeFab MOONGIFT
ThreeFabはTree.jsに対応した3DモデルをWebブラウザ上で作成できるソフトウェアです。 Three.jsはJavaScriptで高度な3Dモデルを描画するエンジンですが、そのモデル作成はやはり大変な作業になります。そこで使ってみたいのがThreeFabになります。 最初の画面です。3Dモデルが奇麗に描かれていて格好いいです。 マウスで視点の変更もできます。 モデルを追加できます。 回転したりライトを変更することもできます。 最終的に作成されるコードを使ってThree.jsで3Dモデルを描けます。 こんな感じにモデルを追加していきます。 ThreeFabを使えばThree.jsで使えるモデルをWebブラウザ上で作成できます。S、D、X、スペースキーがそれぞれショートカットキーとして使えます。最初、慣れるまではなかなか操作が難しいかも知れません。ThreeFabはさらにアニメーシ
【旧版】Three.js入門 (全14回) - プログラミングならドットインストール
WebGLをサポートする3D描画ライブラリ、Three.jsについて学んでいきます。
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ThreeFab | Three.js fabrication tool
Renault Espace Visualization
three.js - examples
Importing 3D Models using Three.js