今回は、Three.jsの「影」について、書きます。 今回の内容は「シャドウマッピング」と専門的には言うのかな？ Three.jsの場合、影をつけるには、４つの準備が必要です。 レンダラー・・・shadowMapEnabled = true 光源・・・castShadow = true 物体1・・・castShadow = true 物体2（地面など）・・・receiveShadow = true この４つのオブジェクトのプロパティに「影（シャドウマッピング）の有効化」を設定する必要があります。 ややこしいのが物体の影の設定です。 影を受ける物体には、「receiveShadow = true」にして、影を作る物体には、「castShadow = true」にします。 写真で、解説するとこんな感じです。 写真の場合だと、影を作っているのは、青い球です。なので青い球に「castShadow
2013-03-09 FxUG@FukuoakでのLT「three.jsはじめましょ」の資料を公開しました。 FxUGはActionScript, Flexなイベントですが、懐が広く本来なら関係ないthree.jsでのLTを許していただき20分ほどお時間頂きました。 当日は Stage3D Starling, Away3D, Altenativa3D, IN2AR など旬な3D OpenGL関連の話とSocket通信、またそれぞれをモバイルアプリにどう利用するかというワクワクする内容が盛りだくさんのステキなお話が目白押しの一日でした。 three.js は HTML5 canvas で3Dを実現するJavaScriptライブラリなので、3Dつながりということでお許しいただきたいと思います。 WebGLだけでないthree.js もともと three.js は Canvas WebGL のた
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
32. <!doctype html> <html> //頂点 <head> var vertices = new Float32Array([ <meta charset="utf-8"> 0.0, 0.5, 0.0, <title>webgl demo</title> -0.5, -0.5, 0.0, <script> 0.5, -0.5, 0.0 document.addEventListener('DOMContentLoaded', function(){ var canvas = document.querySelector('#glcanvas'); ]); var gl = canvas.getContext('experimental-webgl'); // 頂点の数 var verticesLength = 3; var vShaderSource = [ // gl_
こんにちは、エンジニアののびすけです。最近毎日ハムスターになる夢を見ます。 前回の記事「圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選」にまとめましたが、WebGLを使ったサイトが最近話題になっていますね。 従来の平面で考えるWebの時代から次の時代への移り変わりを感じる今日この頃です。 今回は実際にWebGLを使った3D表現にチャレンジしてみます。 JavaScriptで記述しますが、初心者向けにまとめたのでノンプログラマやデザイナーの方にもチャレンジしてほしいです！実際にコード書くところは5分（早い人なら1分）でできると思います。 そもそもWebGLとは PC上で3Dを描画するための技術にOpenGLというものがあります。OpenGLは3DグラフィックスAPIとも呼ばれていて、様々なプラットフォームに対応しており、広く普及しています。 このOpenGLをWe
WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー（3D描画のための一連の計算セット）を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
点や線の大きさ GL_POINTS によって作られた頂点は、それぞれが点として描画されます しかし、デフォルトの点では限りなく小さいため、ほとんど見えないことでしょう デフォルトでは 1.0 が線の太さとして設定されています これは、点を 1 × 1 ピクセルの正方形として描画することを表しています 点の太さは glPointSize() 関数を使って設定することができます また、太さを取得したいのであれば glGet() に GL_POINT_SIZE を要求するとよいでしょう void glPointSize(GLfloat size); size には点の直径を指定します #include <windows.h> #include <stdio.h> #include <GL/gl.h> #include <GL/glut.h> int pointSize = 1; void dis
このたびwgld.orgの管理人であるdoxasさん主催のWebGLスクールに参加しました。 毎週火曜日の19:30〜22:00の全12回の講座となっています。 記念すべき第一回はWebGLの概念についてのお話でした。 WebGLとは何か ざっとWebGLとはなんなのか GPUに直接アクセスできるブラウザに組み込まれたAPI 本来JSからOpenGLを呼び出すことはできない JSとOpenGLの間に入って、OpenGLを呼び出せるのがWebGL 直接GPUを利用できるので、とても高速 ブラウザが対応していても、OSやハードウェアが対応してなければ動作しない WebGLで作られたもの 3dbricks Urban Galaxy Online G-Star RAW | New Denim Arrivals FishGL thisway.js by stravaganza WebGL Fluid
ノイズによるグラデーションとブロック状のエフェクトを組み合わせた LEEROY のウェブサイトがおもしろい WebGL GLSL demo 見た目のシンプルさとは裏腹に 今回ご紹介するのは LEEROY というクリエイティブ・エージェンシーのウェブサイトです。 ウェブサイトの背景が WebGL によって実装されているタイプで、しかもノイズを使ったグラデーションを描画するかんじなので、比較的よく見かけるような外観をしています。 ただ、そこ... ピンポイントに WebGL を活用しつつ大胆な演出を盛り込んだ Kevin Hilgendorf さんのポートフォリオサイト WebGL GLSL demo 用途に応じて適切に 今回ご紹介するのは、Kevin Hilgendorf さんというデザイナーさんのポートフォリオサイトです。 WebGL を使っている場所がかなり限定的になっており、効果的な場
23. Application cache／Canvas／Drag and Drop／Device Orientation ／File API／Geolocation API／History API／Selectors API／Web Audio／Web GL／Web Speech／Web Socket／Web Storage／Web Workers／ Full Screen API／Typed Array／Server Sent Events／SVG／Media Capture API／System Information AP 24. Application cache／Canvas／Drag and Drop／Device Orientation ／File API／Geolocation API／History API／Selectors API／Web Audio／Web GL／
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
こんにちは！ 最近バランスボールで仕事してます。エンジニアののびすけです。 最近はHTML5が何かと話題になっていますね。今までWebブラウザの標準機能で実現できなかったことができるようになるということで注目されています。でも大抵の場合、HTML5とは広義で、JavaScriptやCSSも含めた意味合いのことが多いです。 今日は、そんなHTML5のAPIの1つであるWebGLを使ったサイトやデモを紹介したいと思います。WebGLはWebブラウザ上でプラグインなどのインストールなしで3D表現を行える技術です。 ※WebGLはPCブラウザではIE10以前のバージョンに未対応、そしてスマートフォンブラウザでも閲覧できないので、それ以外のブラウザで見てください。 特にこだわりがなければGoogle Chromeでの閲覧が好ましいです。また、WebGLの描画はPCに掛かる負荷が大きいので高いマシンス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
