「Three.js」はWebGLを使ったリッチな3D表現が使用できる人気のライブラリ。ところが、Three.js公式サイトで紹介しているWebGL有効判定はAndroid 4系のWebView向けのWebGL有効判定が不十分なので、WebGLコンテンツを表示させようとすると真っ黒になるという最悪の事態が発生します(2016/3/2現在 ver74)。Android 4.03からアップデートした4.4の一部でも同様の現象を確認しました。2016/3/2現在、Android ４系のユーザーは62%(参考：「Android Developers」)もいますので、スマートフォン向けWebGLコンテンツを作るならば決して無視できないバグです。 このエントリーではこの現象の原因と解決策を紹介します。 #何が起こっているのか 下記はAndroid 4.1.2の標準ブラウザ、iOS 9.2.1のMobil
Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。 今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場
MicrosoftとProduction I.Gの共同プロジェクトが実現！完全無料WEBゲーム登場！RETHINK WEB GAMING ▶▶ Production I.G and Internet Explorer have teamed up to create Gargantia: Sky Courier, a brand new action adventure game based on the popular intro series Gargantia on the Verdurous Planet. ▶▶ In Sky Courier, you get to play the role of Ledo as he explores his new home from the sky while piloting a surf kite with the help of hi
地理院地図の「3D機能」や地理院地図Globeでは、「誰でも・簡単に・日本全国どこでも」3次元で見ることができます。 地理院地図の3D機能では3Dプリンタ用のデータをダウンロードすることもできます。 本サイトでは、立体地図の使い方や立体模型、触地図の作り方をご紹介します。 最新情報 立体地図を作る（ダウンロード編）に日本の典型地形の立体模型を追加しました。（平成30年7月4日） 地理院地図を改良し、地下の空中の3D表示や、3D表示範囲の選択が可能になりました。（平成29年3月14日） 地理院地図Globeを正式公開しました。（平成29年3月14日） 海外の地形も3D表示できるようになりました。（平成28年12月21日） 地理院地図3Dのプログラムの修正について（平成28年11月21日）
WebGL を使えば、色の加算、減算、乗算といったブレンドモードが高速で処理できるというお話。 Canvas2D でもピクセルマニピュレーションができるので、様々なブレンドモードを自前で実装することができるのだが、ピクセル数 * 4色の処理負荷が CPU にかかるためパフォーマンスがよくない。しかし WebGL のフラグメントシェーダーを利用すれば色を高速で処理できる。 demo WebGL は簡単なことをするにも、初期化の処理が冗長なためコードは長くなってしまうが、実際は大したことはやっていない。 2つのトライアングルを用意する 2枚のテクスチャー画像を適用する フラグメントシェーダーでテクスチャー画像の色をブレンドする GLSL では、4成分 (Red, Green, Blue, Alpha) をそのまま足したり掛けたりすることができるので、ブレンドの公式に当てはめるだけで処理できる。
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
Accès rapide: ➛ CSS3 ➛ SVG ➛ Canvas ➛ WebGL ➛ CSS shaders précédentsuivant action action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-) Quick access: --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- previous next action action = on most slides, something happens when you click (especially sl
Firefox 11以降では3D表示（ページインスペクタ機能を利用）が可能です。が、どういうわけか3Dにできないケースもあるようです。私がそうでした。 ということで、Firefoxで3Dが表示されない場合の対処方法について紹介します。 １．3D表示する 対処方法は後回しにして（笑）、まずは3Dの表示方法から説明します。 メニューから「Web開発」→「調査」を選択。または画面を右クリックして「要素を調査」を選択。 ブラウザ右下に表示された「3Dビュー」をクリック。 これで3Dビューに切り替わります。マウスでドラッグすれば方向を変えられ、ホイールでズームイン・ズームアウトができます。 ２．問題点 ところが、冒頭で述べたとおり、私の環境では「3Dビュー」ボタンが表示されませんでした。 ネットを検索しても、 「3Dこんな風に表示されました！すごい！最高！」 という、まったく苦労せずに表示されました
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_
HTML5による最新Webアプリ 2011年10月26日、品川グランドセントラルタワーのマイクロソフト品川本社にて、「第22回 HTML5とか勉強会」が開催された。HTML5とか勉強会は、HTML5に関心のあるエンジニアやコーダー、デザイナー向けの勉強会だ。今回のテーマは「グラフィック関連API」。当日の様子をお伝えしよう。 Processing.jsってなんだ？ まず、ゼロベースの田中氏（@dotimpact）からプレゼンがスタートした。田中氏は美術大学で非常勤講師をしたり、Processingの入門書執筆なども手掛けている。 Processingとは 田中氏のプレゼンは、Processingの紹介から始まった。 田中氏の＠ITでのProcessingの記事「Processingの対話式スケッチプログラミングで遊ぼう」も参照いただきたい。 Processingは2001年、MITメディア
以前紹介したF1カーのデモ(こちらもWebGL製)の制作なので有名なHelloEnjoyがインタラクティブミュージックビデオを作成されたみたいです。 HelloEnjoyの車のデモ - 強火で進め http://d.hatena.ne.jp/nakamura001/20110314/1300111314 WebGL製ミュージックビデオが再生されているのは3:12辺りから。 Lights Project Demo (WebGL) from London Web Standards on Vimeo. PVはこちらで観れます。マウスカーソルの位置で光の進行方向が変わります。 Lights http://lights.elliegoulding.com/ Twitterから情報を取得し、Twitter IDやアイコン画像を取り込んで表示してるみたいです。 こちらのブログにて詳しい仕組みやテクニッ
試せるようにしたほうがいいと言われたので、マウス操作などの機能をつけてちゃんと形にした。 もしかしたら将来は別の所に移動するかも。とりあえず暫定。 http://edv.sakura.ne.jp/mmd/ Chrome でしか使えません。Firefox は早く DataView を実装してください。David Flanagan さんの DataView.js を使えば Firefox でも動かせると教えてもらったので Firefox でも動くようにした。 Shift+Drag で移動なんだけど、文字選択されてるときは Chrome だとおかしなことになる。説明文を書いてないときは問題なかったのに！ちょっと不満。 マウス操作とキーボード操作以外の変更点は、軸と中心点を付けたこと。 中心点は Point Sprite という方法でやった。（それ以外にどうやればいいのか知らないけど） ↓このへん
投稿した３ＤＣＧ作品を自由な視点から見られる立体作品や画像作品として公開することができます。ご登録・ご利用は全て無料です。
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
