WebGL入門 - サンプルで理解する3D表現の迫力 - ICS MEDIA
WebGLウェブ・ジーエルとはブラウザで3D表示するための標準仕様。いまやスマートフォンを含むすべてのブラウザでWebGLが動作します。WebGLを使えばGPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。 WebGLを使えば主に次のようなコンテンツ開発に役立ちます。 3Dモデルの表示 ゲームコンテンツ データビジュアライゼーション プログラミングアート 魅力的で華やかな画面演出（広告系サイトなど） かつてはFlash PlayerやUnity Web Playerのようなブラウザ・プラグインを使わなければ3D表現はできませんでしたが、WebGLの登場によってプラグイン未搭載のスマートフォンのブラウザでも3D表現が実現可能になりました。 本記事ではWebGL入門者にむけ、数秒で試せるオリジナルのWebGLのHTMLデモを多数掲載。どれもスマートフォンのブラウザでも利
Animated Heat Distortion Effects with WebGL | Codrops
Today we want to show you how to create some realistic looking heat haze distortion effects using fragment shaders in WebGL. The idea is to add a subtle animated distortion to a static image and some text. Please note that the current ZIP file is the compiled build of this project; source files can be found in the GitHub repo. See the link below. Overview For this article, we’ll pick apart one of
シェーダを駆使して大気の揺らぎ・捻じれを表現するエフェクトがすごい！ 解説記事もついてて至れり尽くせり - WebGL 総本山
top 2016 年 05 月 シェーダを駆使して大気の揺らぎ・捻じれを表現するエフェクトがすごい！ 解説記事もついてて至れり尽くせり シェーダ芸で見せる華麗なエフェクト 今回ご紹介するのは、海外の技術ブログで紹介されていたディストーションエフェクトと、その解説記事です。 先日、three.js で横スクロールのゲームを作る解説記事が掲載されていたものをご紹介したばかりですが、今回は GLSL を活用した GLSL シェーダエフェクトの解説記事となっています。この Codrops という技術ブログすごいですね…… 今回のデモは、three.js などは使わず漢らしくシェーダ一本でエフェクト掛けてて、しかもその内容を解説する記事までついてて、もうほんとありがとうございますという感じがしました。 シェーダ１パスで見せる揺らぐ大気 今回のブログ記事のタイトルは「Heat Distortion E
VRM は Unity 専用じゃない！ブラウザで VRM 表示出来るものを作りました！ | VirtualCast Blog
ザ・シードオンライン には、 glTF 規格の拡張である VR 利用想定のヒューマノイドモデル拡張の VRM 及び、 VirtualCast 上でインタラクティブなアイテムを自由に作成出来る VCI をアップロードすることが出来ます。 以前はそれらのファイルをブラウザ上で閲覧するのに、 Unity の WebGL ビルドを用いていました。 しかし、2019年5月現在の Unity の WebGL ビルド(と Web Assembly)は、数 MB のランタイムのダウンロードと、起動処理に数秒かかるなどの難点が存在していて、ネイティブ(JavaScript)実装に置き換えたいという要望が出ていました。一部端末で正常に表示出来ないという問題もあります。 そこで、私山岸の調査の結果、 babylon.js を採用し、自前で VRM/VCI を出来るだけ正しく porting するプロジェクトを稼
WebGLでなんか綺麗なキラキラなパーティクルの演出を作ってみた · けんごのお屋敷
元々 OpenGL を使っていたことがあって 3D の基礎についてはある程度わかっていたので WebGL には本当にすんなり入ることができた。WebGL は OpenGL ES の仕様を元にしているので当然といえば当然なのですが、他の OpenGL のプラットフォームと比べて WebGL はテキストエディタとブラウザさえあれば開発環境が整うという手軽さ、さらに WebGL 界隈ではとても有名な three.js というライブラリがあるおかげで、さらに敷居が下がってる。ということで、前々から WebGL で作ってみたかった綺麗でしなやかなパーティクルの演出を作ってみました。 The XSEEDS ※ちなみに XSEEDS というのは、有志で集まったエンジニアがお酒飲みながらワイワイ開発やってる集団です。 作ってみたので、せっかくなので WebGL ってこんなことができるよ、こうやって作れるん
canvasとWebGLによるCGの基礎
canvasとWebGLによるコンピュータ・グラフィックスの基礎 第５週 ２次元座標平面におけるＣＧ表現技法(4)（2015年 5月15日） 例題：数理造形による樹木の表現（サンプル） 実習課題 課題#05：ホタルの乱舞を表現せよ。（サンプル） 提出確認 12130031 12130114 12130384 12130774 12130926 12131411 12131580 12131796 12132043 12132364 12132465 12132992 12133285 12134124 12134261 参考文献 コンピュータグラフィックスとディジタル映像表現 CGエンジニア検定 エキスパート対応 「コンピュータグラフィックス」 CG-ARTS協会（2015） ISBN: 978-4-903474-49-6 CGクリエイター検定 エキスパート対応 「ディジタル映像表現 -C
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
2011-09-23
第一世代のCore i 5のIntel HD Graphicsをつかってる友達がWebGLのデモが動かなくてがっかりしていたのでおじさん少し調べました。結果動いたようなのでメモしておきます。 最初聞いたときは、新型のMBA(GeForceやめてIntel HD Graphics3000になった)でもWebGL動かないんだけど！って言ってる人がフォーラムとかにいて、そういうものなのか〜と納得してしまったのだけど、WikipediaみたらOpenGL2.0以上をサポートしていればおｋとの記述があって、「あれ？なら動いてしかるべきなのでは」と思って調べたらやはりそのようでした。 Firefox URLバーに"about:config"って打ってから、 webgl.force-enabled layers.accelaration.force-enabled gfx.firect2d.force-
THREE.jsをサンプルのまま作るとCPU使用率が半端じゃない件 - tsuge development page
最初に、ここで使っているのはTHREE.jsのRev.49なのでそのつもりで。 バージョン違いの場合はまた別の解があるかもです。 THREE.jsをサンプルのまま作ると、デュアルCPUであろうと最大限にCPUを使ってくれて常時100％近い。 ちなみにグラフィックボードをちゃんと搭載しているPCなら別として、ビジネス向けノートPCなどソフトウェアでがんばってる場合ね。 Webサイト表示してCPU100％なんて、正直いやだよねと。 CPU時間なんて最近そんな気になるもんでもないけど、ノートは熱くなるし、バッテリの消費も早いし、どっちにしろ使用率は少ないに越したことないだろと。 サンプルでよく見るのはこういう処理。 function animate() { requestAnimationFrame(animate); render(); } function render() { render
安藤日記 [&] WebGL Performance Tuning
安藤日記 安藤日記：デジタルガジェット好き「安藤幸央」の日々のメモ ( yukio.andoh@gmail.com ) [ http://twitter.com/yukio_andoh ] Design Sprint Newsletter https://designsprint.substack.com/ ( via. Behind the magic of AKQA Winterlands ) #WebGL Performance Tuning WebGLコンテンツ／プログラムの速度をコツコツと速くするための、 パフォーマンスチューニング観点をまとめました。 まずはプロファイリングが重要。 闇雲にチューニングしても、あまり速くならない場合もあります。 また、最初の設計や、ハードウェア性能を知った上でのデータ量の見積もりも重要です。 ■WebGLプロファイリングのコツ ●グラフィックスパ
WebGL対応のライブラリThree.jsを爆速にする方法 | ClockMaker Blog
前回のWebGL(Three.js)とStage3D(Away3D)の比較ですが、Mr.doobさんを始め国内外の多くの方からご指摘頂きWebGL(Three.js)版を最適化したところ、最終的にはFlash(Away3D)版と同じぐらいのパフォーマンスになりました。当初、最適化・検証不足で間違った情報を掲載してしまい申し訳ありませんでした。 さて、そのWebGL(Three.js)版を最適化した手法が有意義だったのでシェアしたいと思います。 デモの紹介 まずはこちらの2つのデモの再生を比較してみてください。WebGL対応のブラウザ(例：Google Chrome)でご覧ください。 ▼最適化前 ▼最適化後 どうでしょう？ 圧倒的に後者のほうが滑らかに再生できているのではないかと思います。 後者のほうは配置している3Dのオブジェクト数が10倍近く多いにもかかわらずです。 ※ちなみにFlash
WebGL Report
WebGL Report You need to enable JavaScript to see WebGL.
Three.jsで雪を降らせる
WebGL Advent Calender 16日目の記事です。 何番煎じかわからないですが、この季節ですのでThree.jsの入門用として雪っぽいのを降らせようと思います。 Three.jsで雪を降らせる デモ 基本的に通常のThree.jsでオブジェクトを表示させる時と同じで簡単です。 PointCloudMaterialに色とサイズとテクスチャを渡してマテリアルとしています。（いつのまにか名前が変わってました。） ちなみにテクスチャは見えにくいですがこんな感じです↓ これでPointCloudを生成してパーティクルを追加しています。（いつのまにかこれも名前がParticleSystemから変更されていました。） また、FogExp2でフォグを設定して、遠くのパーティクルを指定した色に近ずけて、霞んで見えるようにしています。 あとはこのPointCloudのy軸中心回転とパーティクルの
Three.jsでJSON形式でモデルを読み込んでBoneアニメーションさせるときの注意点 - Qiita
ちょっと（だいぶ？）ハマったのでメモ。 いやー、Three.jsはupdateが激しいのと、そもそも日本語記事が少ないのでだいぶ苦戦した。（というか、まだ全然しっかり把握できてないけど） とりあえず モデルを読み込んでアニメーションさせる 、というWebGLでなにかやるときに避けて通れない処理でハマったのでメモ。 まず結論から言うと、**Boneアニメーションをさせる際は、Boneの数が問題になる**ぽい。 boneの数はどうやら関係ないぽい。改めて書きだしてみたら正常にアニメーションしました。 ちなみにモデルデータはBlenderでThree.jsのJSON形式にExportしたものを使用。 Export設定 モデルを作成してBoneをいくつか適当に追加してから（17くらい？）Exportして読み込ませたところ、モデル自体は正常に読み込まれているものの、アニメーションしない。 試しにBo
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://bugs.chromium.org/p/chromium/issues/detail?id=573565
https://bugs.chromium.org/p/chromium/issues/detail?id=661596
Adreno 300 series GPU black texture flickering · Issue #9988 · mrdoob/three.js
https://lab.infocom.co.jp/2016/01/theta-s-4-oculusvr.html/
SSSSLIDE
