You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
公式サイト 概要 SandDanceは、WebGLを用いたBIツールで巨大なデータセットを素早く可視化し、複数のビュー間を滑らかなアニメーションでトランジションさせることで新たな知見を得ることができるBIツールだそうです(公式サイトより) サンプル画像でもカッコいいアニメーションが目を引きます。 deck.glのショーケースページで紹介されていて、個人的に興味を持っていたのですが、先日Microsoftの公式ブログでオープンソース化されることが発表されました。 Microsoft open sources SandDance, a visual data exploration tool - Open Source Blog Github やたらパーティクルが飛び交ってカッコいいです。 慣れないと無意味な3Dチャートとか作ってしまいかねない危うさはありますが、内部ではDeck.glやVeg
ステンシルバッファ(マスク処理)にシェーダー適用して、部分的にモザイクさせてみました。 Live2D WebGL版と合わせるとこんな感じにできます♪ (エロゲー用の素材を持っていないので公式サンプルでテスト) ・Live2Dで部分モザイクデモ 上記デモページでは、モーション切替とモザイク箇所の切替ができます。 モザイクは一部の描画オブジェクトごとにかけられるように実装しています。 そのため、描画オブジェクトが動くとモザイク部分も動きますっ! WebGLの技術としては、以下のものを使いました。 1)モザイクシェーダー 2)ステンシルバッファ 3)フレームバッファ 4)Live2DのWebGL描画 開発環境 ・Live2D WebGL SDK 2.0.04_1 ・SDKのSimpleプロジェクトをカスタム モザイクシェーダー部分の実装 モザイクシェーダーは以下の記事を参考にさせていただきました
ちょっと前から、大手キャリアより回線を借りてサービス展開をしようとするMVNOの評判が良いようです。トップ3キャリアより料金が格段に安いSIMカードを売っていることもあり、SIMフリー端末の売れ行きがすごいことになっています。 参考リンク:UQモバイルキャッシュバック スマホやタブレットなどで、毎月数百円からスタート可能な格安SIMを提供しております。超ビギナーの方でも選択しやすいように、使い方別におすすめをご紹介させていただきました。 格安SIMに関しては、ひと月500円代でも始めることが可能ですが、データ通信容量プランが2つありますので、比較・検討することが必須です。さしあたって2GBと3GBで、それぞれ月ごとにいくら取られるかで比較するのがおすすめとなります。 「格安スマホおすすめランキング」を制作しました。どういった根拠でその格安スマホをおすすめするのか?個々のプラス要素とマイナス
御嶽山噴火時、その場にいた人たちの証言を集めたコンテンツ『NHK 御嶽山「噴火の証言」』。 Three.jsの利用やDOMとの連携など、製作者の立場から、WebGLでコンテンツを作る利点や注意すべき点について語ります。 ※本稿は実際にサイト作成に関わった面白法人カヤックのフロントエンドエンジニアのごんさんからご寄稿いただきました! ありがとうございます! 50名以上の方が亡くなり、戦後最悪の火山災害となった2014年9月27日の御嶽山噴火。 『NHK 御嶽山「噴火の証言」』は、御嶽山の噴火時、その場にいた人たちの証言を集めたWebサイトです。 3Dモデル上にプロットされた証言をクリックしたり、カメラを自由に動かして、御嶽山を眺めることで、噴火当時の状況を見ることができます。 今回は、開発を担当した面白法人カヤックのフロントエンジニアが、全面WebGLで制作した本サイトの内容について、制作面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 3Dモデリングって聞くと何となく敷居が高く感じられますよね。専用のソフトウェアを使って、サーバサイド/アプリのプログラミングとは全く異なるプロセスを辿るような気がします。 しかし3Dプリンタも出てきている今、無視する訳にはいきません。そこで使ってみたいのがFlood、Webブラウザベースのビジュアルプログラミング環境です。 Floodの使い方 Floodでは数値を入力してモデリングするので、プログラミングする感覚に近いと言えるかも知れません。また、ビジュアルプログラミング環境として3Dプログラミングを学ぶのにぴったりです。なおWebGLを使っていますので、それに対応したブラウザである必要があります。 Floodはnode/JavaScript製のソフトウェア(MIT License
Mozillaは6月4日、オープンソースのクロスプラットフォームのゲーム構築用JavaScriptライブラリ「PlayCanvas Engine」をリリースした。「世界で最も容易に利用できるWebGLゲームエンジン」としている。 PlayCanvas Engineは3Dグラフィックを利用したゲーム開発向けのJavaScriptエンジン。Webブラウザ上で利用できる3DグラフィックスAPIである「WebGL」を利用する。プロジェクトは、WebGLがデフォルトで有効となった「Firefox 4.0」のリリース(2011年3月)後に立ち上げられており、パートナーとしてMozillaのほか、米ARMやゲーム開発を手がける米Activisionが名を連ねている。 対応OSはWindowsおよびMac OS X、Android、iOSで、グラフィックスのほか物理演算エンジンやアニメーション、2D/3D
WebGLを使えば高度なグラフィックスが描けるというのは分かっていても、実際どれ程度のことができるのかはサンプルがあまり多くありません。それだけグラフィックスの作り込みが大変ということでしょう。 そんな中登場したのがBabylon.js、WebGLを扱うためのJavaScriptフレームワークです。Babylon.jsを駆使すれば3Dゲームだって作成できるとのことです。 デモです。Webながら70MBもあります。 マウスやキーボードで視点を変えたり動き回ったりできます。 グラフィックスはかなり奇麗です。 ロボットのデモ。長細い部分が何かというと… スライドを引っ張りだしてきます。 こちらは心臓をモデリングしたデモ。 マイクロソフトカフェ。 幾つかのデモは矢印キーではなく、傾きセンサーを使って視点の操作ができます。MacBook Proなどを持って動かせば3D空間を動き回れるようになっていま
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
SculptGL is a small sculpting application powered by JavaScript and webGL.
The Platform for 3D GeospatialCesium is the open platform for software applications designed to unleash the power of 3D data. We are excited to share that a geospatially accurate 3D Globe is now available in the open source platform QGIS as part of the QGIS 3.44 stable release. This development fulfills a critical need for QGIS users, enabling visualization of both 3D Tiles and other standard geos
glsl.jsはWebGLにおいてGLSLを使えるようにするライブラリです。 ゲームや3Dをリアルに近づけるために必要な要素の一つがシェーダ(ライティング/シェーディング)です。OpenGLでは効率的なシェーダを実現するためにGLSL(OpenGL Shading Language)を開発しましたが、WebGLの世界におけるGLSLとして紹介するのがglsl.jsです。 こちらはこくこくと色が変わるデモ。 全体が変わって格好いいです。 ボールが飛び交うデモ。 スプライト画像のマリオが移動するデモ。 デモ動画 デモ動画 glsl.jsはWebGLのサブセットになります。JavaScriptでロジック処理を行った後、レンダリング処理をglsl.jsが行います。ソースを見ると普通にGLSLが書かれているので移植も容易かも知れません。 glsl.jsはJavaScript製、Apache Lice
WebGL HeatmapはWebGLを使って高速に動作するヒートマップライブラリです。 ヒートマップを描こうと思うとまず必要なのがポイントの膨大なデータで、それらを集計してサマライズして中央を濃く、周辺にいくに従って薄くなるように計算して…と結構複雑な感じがします。しかしWebGL Heatmapを使うと高速に、かつ滑らかな描画が可能です。 デモです。 Webページ全体にオーバーレイさせた場合。 WebGL Heatmapでは一秒間に50万のデータを描画可能としています。そのお陰もあって、かなりぬるぬると滑らかな描画が可能です。ただしWebGLをサポートしたブラウザやCanvasに対応していなければ使えませんのでご注意を。 WebGL HeatmapはHTML5/JavaScript製、MIT License/GPL/BSD Licenseのオープンソース・ソフトウェアです。 MOONG
多彩な表現力の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はこれまで解説し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く