Multiple transparent textures on the same mesh face in Three.js
Is it possible to lay multiple textures on top of each other on the same face in Three.js so that the alpha blending is done GPU accelerated in webGL? The textures are (or should be) applied to the same face so that the bottom texture (texture 1) is without alpha channel and the above textures are alpha channeled in a way like texture 2 in the below image example. This blending can be achieved usi
地理院地図の地図タイルを使ったD3.js&Cesiumサンプル
D3.jsでラスター地図のパン／ズーム＆移動の記事を書いた頃は、まだ「電子国土Web.NEXT」だったので、タイル画像を取得するためのリクエストを送るのが非常にメンドウだったのですが、「地理院地図」に代わって一般的なxyz方式でタイル画像を取得できるようになりました。詳細は下記ページで確認できます。 地理院地図 地理院タイルを用いた開発 だいぶ使いやすくなりましたね。 OpenLayersやLeafletを用いたサンプルは公式サイトに掲載されているので、ここではD3とCesiumを使ったサンプルを載せておきます。 D3ラスタータイルサンプル <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/d3.geo.tile.v0.min.js"></script> (function()
WebGLを利用して3Dな地図を作成できるライブラリ「Cesium」
Cesium はApache 2.0ライセンスの下、オープンソースとして作成された3D地図作成ライブラリです。 ハードウェアアクセラレーショングラフィックスにWebGLを使用しており、クロスプラットフォーム、クロスブラウザで、動的なデータ可視化を行うのに利用することができます。 公式サイトのデモなどを見ると、その性能の高さを感じることができます。 (以下スクリーンショット、公式サイトより） ほんの少しだけ触ってみました。 サンプルコード ぐんまちゃんを群馬に貼り付けてみました。 //セシウムウィジェットを作成 var widget = new Cesium.CesiumWidget('cesiumContainer'); //イメージレイヤーを取得 var layers = widget.centralBody.getImageryLayers(); //イメージレイヤにぐんまちゃん画像を
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 前回：[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（３） - Qiita 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などの
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（４） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/69d8c8fecb090420a8404cef8c3d8bf536921a93/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTk0JUVGJUJDJTg5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz02Y2NjYjg0ZGFmNjYzNTUxYWQ4NjcwYjNiNDA0ZDc2YQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwZG94YXMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTlhZjJmN2EwYWU0MmZiNDhmZGIyZjE0NjdjZDI4YmJk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D7c6a4e4ca3f89a617bb68c8098251ab5)
Mixing maps and WebGL to visualize huge geo datasets
Product updates, customer stories, and tips and tricks on Google Maps Platform Just like you’d expect from a Maps Layer you can now load in data. WebGL Layer uses GeoJSON as a data source, but you can extend this as you wish. You can use GeoJSON from your application or GeoJSON from an external source. There’s also support for Vector Tile Servers. As WebGL Layer is designed to display huge amounts
三次元散布図をRで描くのに画期的な新機能がRGLパッケージに加わった - ほくそ笑む
以前、三次元散布図をRで描いてみたという記事で紹介したRGLパッケージに画期的な新機能が加わったので紹介します。 (情報源：R: Interactive 3D WebGL plot of time-space cube with RGL | geolabs) RGLパッケージの良いところは、3次元プロットをマウスドラッグでグリグリ動かせるところなのですが、いざ、ファイル出力しようとすると、静止画か動画でしか保存できず、インタラクティブな3次元プロットをそのままファイルに保存することができないというのが欠点でした。 しかし今回、新機能として、WebGL で動く HTML ファイルとして保存できる機能が付加されたようです。 さっそく試してみましょう。 install.packages("rgl") library("rgl") data(trees) plot3d(trees) writeWe
WebGLの能力を引き出すプログラマブルシェーダー
WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ
WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか！」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・（´・ω・｀） そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして
WebGL 開発支援サイト wgld.org
次なる 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
アーカイブ：WebGL｜NPO法人 natural science
特定非営利活動法人natural science は、知的好奇心がもたらす心豊かな社会の創造にむけて、 現代社会では実感する機会の少ない科学や技術のプロセスを可視化・共有化する場づくりを通じて、 科学を切り口とした地域づくりを目指す、若手主体の団体です。 | More ≫
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
WebGLで2Dの処理を行う入門記事「WebGL Fundamentals」 - 強火で進め
HTML5 Rocks - WebGL Fundamentals http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ サンプルコードはこちらからダウンロード出来ます。 /www.html5rocks.com/content/tutorials/webgl/webgl_fundamentals/static/webgl/ - html5rocks - ...see why.html5rocks.com - Google Project Hosting http://code.google.com/p/html5rocks/source/browse/www.html5rocks.com/content/tutorials/webgl/webgl_fundamentals/static/webgl/?r=daa158
JavaScript Advent Calendar 2011/WebGLコース初日、WebGLの基本的な考え方 - by edvakf in hatena
JavaScript Advent Calendar 2011 参加者募集！ - by edvakf in hatena ↑まだまだ参加者募集中です。 WebGL駅伝は、もし25人に満たなかったら、最後の人の次の日から僕が一人で走りたいと思います。ネタと時間的余裕が続く限り… なんてことを言っておきながら、実は僕自身はWebGLも3Dプログラミングも初めて2ヶ月の初心者なので、自分がWebGLを始めるときにどういう解説が欲しかったかということを考えながら入門編を書いてみたいと思います。（WebGL駅伝の他の参加者の方々にはつまらない内容だと思いますが） WebGLプログラムの流れはおおまかに言ってこれだけです。 シェーダーを用意する 頂点座標をシェーダーに投げる フレームごとにパラメータを変えてシェーダープログラムを走らせる シェーダーは頂点（vertex）シェーダーとフラグメント（fra
Three.js[0]-webGLとthree.js
最近three.jsをいじり始めています。 以下が作成してみたもの。 three.js:study01 three.js:study02 three.jsの前に以前のエントリでも書いたとおりOpenGL ESの勉強も兼ねてwebGLを少し調べていた。 webGLというものはどう言うのかとか、その文法とかに慣れるために、こちらのThe Lessonsを一行づつコピペしたりコメント書いたりしつつ学習を進めた。 The Lessons – Hack The WebGL (WebGL勉強会) こんな感じで、レッスンの内容通りに組んでみていた。 WebGL study01 WebGL study02 コピペなのに動かなかったり、ちょっと図形を書くだけなのに沢山のコードが必要となったりと大変すぎる、そして沢山の新しい概念で頭が混乱する。 それでもこのレッスンとOpen GL ES 2.0 プログラミン
Enabling & Using WebGL on iOS | Nathan de Vries
Background I’ve become a lot more interested in WebGL lately, and remembered reading on Hacker News a while back that WebGL would be available in iOS 5 as part of the iAd framework. WebGL will not be publicly available in iOS 5. It will only be available to iAd developers. When iOS 5.0 went GM, I decided to knock up a quick WebGL demo to see what was involved & how well it performed. Unfortunately
Virtual Globe and Terrain Rendering: WebGL in Internet Explorer
Monday, October 17, 2011 WebGL in Internet Explorer Posted by Patrick Cozzi Currently, even Internet Explorer 10 will not support WebGL. Meanwhile, all the other major browsers support this new standard. I'm still confident that Microsoft will add WebGL support to IE, but as WebGL developers what can we do in the meantime? Chrome Frame - an IE plugin that uses the Chrome engine to render web-pages
Maverick Project
今回は、COLLADAフォーマット形式のdaeファイルのローダーを自作します。 COLLADAは、XMLベースの3Dアセットデータ( 3Dモデル、テクスチャ、シェーダ、物理パラメータなど )を扱うためのファイルフォーマットです。 XMLベースのため、javascriptからの扱いが容易です。まあ楽だから実装してみようと思ったわけですけどね。 当ページのサンプルでは、3Dモデルとテクスチャのロードに焦点を絞って実装します。 「Canvas 3d JS Library」のソースを参考にしていますが、ライブラリ自体は一切使用せず、すべて自作しています。 なおCOLLADAについて詳細をチェックしたい方は、公式サイトCOLLADA - Digital Asset and FX Exchange Schemaを参照してください。 さてソースの解説ですが、今回はまじめにやります(笑)。 今回は新規で作
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsfiddleライクにWebGLの動作テストが可能なOSS・「WebGL playground」
iPad 2で各種WebGLのサンプルを動作された動画 - 強火で進め
