WebGL Chaser | ALUMICAN.NETmouse drag: look around space key: surface mode ‘s’ key: show / hide stats credit: alumican.net, core 3d by three.js, skybox by Jochum Skoglund
Tumblr
この記事の対象: ユーザーインターフェイスやグラフィックスを扱うデザイナとプログラマ 昔話から始まって恐縮ですが、私が3DCGプログラミングに触れたのは今から20年近く前、当時学生だった清水亮氏がプログラミング雑誌に投稿していた記事やプログラムを見掛けたのがきっかけだったと思います。私は残念ながら「神童」ではなかったのでベクトルや行列については「チンプンカンプン」でしたが、いずれ3DCGを扱ってみようという気になった事は確かです。 その当時と今では、ハードウェアの性能、ソフトウェアの規模、そこから生まれるCGの表現力、何れを取っても桁違いになってしまいました。が、ベクトルを伸ばして、回して、移動させて、という操作がコンピュータグラフィクスの基本である事は何一つ変わっていません。 20年前の昔、家庭のコンピュータでベクトルや行列の計算をして画面にポリゴンを描くなどという事に興じていたのは、一
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
CanvasタグとJavaScriptで3Dのデモを作ってみました | ClockMaker Blog
HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。 デモを見る ソースコード (［右クリック］→［ソースを見る］を選択) こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが（Papervision3D演出サンプルNo.01:羽ばたく蝶々）、両者のデモを比較することでメリット・デメリットが見えてきます。 ＜追記：2013年9月3日＞ Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。 デモを見る ソースコード (TypeScript)
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
Sprite3D.js, a small library for generating and manipulating CSS 3D transforms
a small library for generating and manipulating CSS 3D transforms NOTICE: This page is slowly getting outdated. In my spare time, I've been working on a major syntax revision, Firefox compatibility issues and a new version of this page. Until I get the time to finish all of this, here's a list of the most up to date resources : "v2" branch on github (featuring a simplified syntax) A more recent li
「一切ポリゴンを使っていない超リアルな3DCG」ってどういうこと？
ポリゴンが不要になる時代も来る？ オーストラリアのゲーム会社が、ある画期的なCG技術を開発しているそうです。 この技術は「Unlimited Detail Technology」と呼ばれ、従来の3DCGに比べ、より細部まで正確に立体物を表現できる点が特徴。そして何と言っても、「ポリゴンを使っていない」という点で多くのユーザーを驚かせました。 私たちが普段見ているCG映像の多くは、ポリゴンと呼ばれる多角形の「板」を無数に組み合わせることで立体物を描いています。しかしこの「Unlimited Detail Technology」ではポリゴンの代わりに、微細な「粒」を組み合わせて物体を表現。ポリゴンの場合はどうしても、アップで見ると板の継ぎ目がカクカクして見えてしまいますが、この方法なら理論上、どんな複雑な形の物体でも正確に再現することが可能なのだそうです。 百聞は一見にしかず、まずはYouTu
WebGLの（実質的に）仕様上の脆弱性について(日本語訳) - ものがたり(旧)
WebGLの（実質的に）仕様上の脆弱性が見つかったとされて、話題になっています。元はContext Information Security社のブログの記事なのですが、 http://www.contextis.co.uk/resources/blog/webgl/ 日本語でもかいつまんで紹介されています。 http://japan.cnet.com/news/service/35002505/ とはいえ、これじゃ何だか意味が分かりませんし、原文はなかなか簡単には読めないと思うので、ちょっくら日本語訳してみました。全体的にやっつけながら、後半は特に寝ぼけながら訳しているので、何かおかしいところがありましたらコメント等で教えて下さいませ。翻訳許諾は明日辺りお願いしてみようと思います。（ダメって言われたら消す）→もらいました。調査の次のラウンドが終わったらまた結果を教えてくれるみたい。 追記:
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
立体印刷技術：自作イラストを3Dにしてくれるサービス | WIRED VISION
立体印刷技術：自作イラストを3Dにしてくれるサービス 2008年8月26日 カルチャー コメント： トラックバック (0) Matt Blum こんなものを組み立てたら実にクールだというアイデアはあるのに、実際にそれを組み立てる手段がない、という経験はないだろうか。あるいは、持っていたら格好いいと思えるようなオモチャやアート作品をデザインしたのに、プラスチックを成型したり立体的に加工したりするのに十分な技術がない、ということはなかっただろうか。 そんな経験がある人には、『Shapeways』がお勧めだ。Shapewaysは、(一定の制限内なら、)好きなデザインを作ると、デザインをプラスチックで立体に加工して送り届けてくれる。 こういったことが好きな人々の例にもれず、私は初めてこの話を耳にして以来、この立体印刷技術を試してみたくてたまらなかった。そんなとき、米Shapeways社が自分たちの
CGアニメだといわれても本物に見える｢Emily｣のインタビュー映像（動画）
この女性は、実はコンピューターで作ったCGです。 作り方は以下の通り。まず女優、のEmily O’Brienの35種類の表情を普通のデジカメで撮影、Image Metrics社のテクノロジーで処理を施します。その後は本物のEmilyはもう不要で、アニメーターの仕事。 結果は…CGでできた｢Emily｣のインタビュー映像を以下に置いておくので、ぜひご覧になってください。そして驚きあきれてください。 表情とか、ホントよくできてますよね…気になる点と言えば、歯が入れ歯にみえることくらいでしょうか？ とうとう｢映像では本物かニセモノか見分けがつかない時代｣が訪れちゃったんですかね。 [timesonline via neatorama and technabob] Mark Wilson（MAKI／いちる） 【関連記事】 ・シドニーで匍匐前進するニッポンのサラリーマンロボ（動画） ・セガの女性型ロ
タグクラウドが3D空間に回転するWordPressのプラグイン -WP-Cumulus
WP-Cumulusは、Flashで作成された3D空間に、マウスの動きに合わせてタグが回転するWordPressのプラグインです。 ※設定が悪いのか、日本語文字化け中です WP-Cumulus Flash based tag cloud デモ プラグインの通常のダウンロードファイル「wp-cumulus.zip」では日本語に対応していませんが、下部にある「Japanese」から「tagcloud_japanese.zip」をダウンロードして「tagcloud.swf」を差し替えると日本語表示がされるそうです。 ※上記にあるように、当サイト（UTF-8）では設定がダメなのか文字化け中です。タグのリンクもうまくいってません。 WP-Cumulusの設置方法は、プラグインフォルダにアップロードし、タグクラウドを配置する箇所に「[ WP-CUMULUS ] 」、もしくは下記のコードを記述するとタグ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
動画変換など39のソフトが無料の「Free Studio 5.0」