多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（2/5 ページ） さまざまな形状を扱う 前のページでは球体を1つだけ表示しましたが、もちろんThree.jsで表示できる形状は球体だけではありません。Three.jsで表示する形状を定義する方法には、大きく分けて以下の3つがあります。 プリセットの形状を利用する プログラムで形状を生成する CGツールで作成したデータを読み込む 以降では、これら3つの方法を個別に解説します。サンプルコードは前ページのサンプルからの変更部分のみを掲載しますので、ソース全体が見たい方は、「実際のサンプルを見る」のリンクでサンプルを表示し、そのページのソースを表示させてください。 プリセットの形状を表示する 前ページのサンプルではSphereGeometryを使って球体を生成しましたが、Three.jsにはほかにも
Real-time Cloud Rendering | CL3VER
REAL-TIME RENDERING ON GOOGLE CLOUD & NVIDIA RTX! Photorealistic ray-tracing 3D engine to visualize real-time 3D product presentations and 3D configurators in the browser
HTML5 Canvas 2D Context で描いた内容を WebGL の テクスチャにする
高確率で思い込みによる説明．間違っていることが多い．/「無知だったり、勘違いしていたり、底意を押しつけたり、いいかげんだったり、噂や疑惑を信じていたりして、狂気じみてさえいるかもしれません」( http://bit.ly/gs23zg ) 追記 2013/10/23: 書いた「WebGLのTextureをCanvasに文字(Web Fonts)を書いて動的に作ってみる(jQuery/ThreeJS使用, Firefox 24.0/Safari 6.0.5で動作)」 一応まとめておく． やってみた． ここのこちらをベースにする． ０．他のjsファイルの呼び出しをどうにかしておく downloadして配置した場合はパスを変えておく．以下の3種が必要となる． <script type="text/javascript" src="./webgl-utils.js"></script> <scri
Inka3d -
Tự sướng hay thủ dâm là một cách để khám phá cơ thể, cảm nhận khoái cảm và chủ động thỏa mãn nhu cầu sinh lý tự nhiên. Tuy nhiên, hành động này nếu lặp đi lặp lại mỗi ngày có thể tiềm ẩn những rủi ro sức khỏe khiến nhiều người lo ngại. Vậy …
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
Welcome to Babylon.js 7.0 Our mission is to build one of the most powerful, beautiful, simple, and open web rendering engines in the world, and we are excited to announce the next step forward in that journey: the release of Babylon.js 7.0. This new version brings a smorgasbord of performance improvements, rendering enhancements, and exciting new features that you will NOT want to miss.
Unreal Engine | The most powerful real-time 3D creation tool
GamesFilm & TVArchitectureAutomotive & TransportationBroadcast & live eventsSimulation With Unreal Engine, you can bring amazing real-time experiences to life using the world’s most advanced real-time 3D creation tool. From first projects to the most demanding challenges, our free and accessible resources and inspirational community empower everyone to realize their ambitions.
WebGL Water
Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. If you can't run the demo, you can still see it on YouTube. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytrac
Creating skeletal animation in Blender and exporting it to three.js. | DevMatrix
Today I’ve faced a rather difficult problem to solve. Creating model in Blender, animating it with armature and exporting the animation to three.js (r56) JSON format. I was working on for 2 days now and it was really a harsh job to be done, especially that three.js is still in alpha version and a lot of features are not stable and fully reliable. So now I’m gonna explain how to perform the mention
Chrome extension, WebGL Inspectorが超便利
Canvas, WebGL開発で困るのがデバッグ。 HTML, CSSみたいに開発ツールで状態を確認することもできず、Canvas内がブラックボックスになること。 何がなんでどうなってるのか検討もつかない。 Chrome 拡張機能 WebGL Inspector を追加すると明るい未来が開けます。 WebGL Inspector by benvanik Chrome ウェブストア: WebGL Inspector 拡張機能を追加し有効にするとWebGL を使用していると画面右上に[Capture][UI]と表示されます。 [UI]を押すと画面下側にパネルが開きます。 これで様々状態を知ることができます。 アニメーションを遅くしたり、一時停止したりが可能です。 [Capture]を押すとその時点のスナップショットがとれます。 Githubでソースコードが公開されています。 今も頻繁に更新され
Getting started with CSS custom filters (CSS shaders)
Skip to instructions and examples if you want to see CSS custom filters in action. Skip to step-by-step explanation if you want to see how to create your own CSS filter effect. Introduction CSS custom filters (formerly known as CSS shaders) are a new browser feature for applying user-created visual effects to elements of HTML document. Custom filters are a part of Filter Effects 1.0 specification.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Three.js - examples
Sign in - Google Accounts
Sign in - Google Accounts
http://threejs.org/docs/58/
Staff picks
three.js editor
ELLIE GOULDING
http://www.gooengine.com/demofiles/pearl-boy/index.html
Workshop / Chrome Experiments