WebGLのカレンダー | Advent Calendar 2016 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
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のカクつき対策まとめ（Three.js編） - ICS MEDIA
FlashのStage3Dや、WebGLの登場によってブラウザ上でも高度な3D表現ができるようになり、ウェブコンテンツの表現の幅が広がりました。しかし、高速と言ってもコンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事
3D Visualization of a Convolutional Neural Network
Input image: Filter: Weighted input: Calculation: Output: Draw your number here Downsampled drawing: First guess: Second guess: Layer visibility Input layer Convolution layer 1 Downsampling layer 1 Convolution layer 2 Downsampling layer 2 Fully-connected layer 1 Fully-connected layer 2 Output layer Made by Adam Harley. Project details.
たった4行でできる！ ブラウザ向けVRをThree.jsで実装する方法 - ICS MEDIA
2018年にOculus Go（オキュラス・ゴー）が発売されました。Oculus Goはパソコンやスマートフォンを必要とせず、単体でVR（バーチャルリアリティ、仮想現実）が楽しめるスタンドアロン型VR HMD（ヘッドマウントディスプレイ）です。価格も当時は23,800円からと比較的安価なため、日本でも購入者が増えこれまでと比べ一気にVR環境が広がりました。 VR環境の普及に伴い、ウェブコンテンツにおいてもVR対応へのニーズが増えています。ウェブブラウザにはWebXR Device APIが策定されており、これを使用することでブラウザでもVR体験が可能です。 ※以前はWebXR APIではなく、WebVR APIという仕様がありました。WebVR APIの策定はv1.1で停止しています。VR以外にもAR（拡張現実）やMR（複合現実）といったXR（◯◯現実）を総合的に扱うWebXR Devic
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita
[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１）WebGLGLSL まずは挑戦してみよう シェーダを自分でコーディングするなんて…… きっとお難しいんでしょ…… と、お思いの奥様方。そんなことはないんです。コツをつかめば意外と楽しめます。当連載では、シェーダというものに対して抱かれてしまいがちな、漠然とした 難しそう感 を払拭すべく、簡単なシェーダの記述とその基本について解説したいと思います。 想定する読者 当連載では、シェーダってなんか難しそう……とか、シェーダプログラミング始めてみたいけど……とか、なんとなく興味を持ってるけどシェーダを記述したことがない方を読者に想定しています。 たとえば Unity などのツール、あるいはマインクラフトのようなゲーム、またはモデリングソフトなどでもシェーダを自分で記述することができるような世の中で
![[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2c6b612bbe897c30bb1fb761bba9a593a8115da9/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJUUzJTgyJTg0JUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThDJUUzJTgxJUIwJUU4JUI2JTg1JUU3JUIwJUExJUU1JThEJTk4JUVGJUJDJTgxJTIwV2ViR0wlMjAlRTMlODElQTglMjBHTFNMJTIwJUUzJTgxJUE3JUU1JUE3JThCJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgwJTgxJUUzJTgxJUFGJUUzJTgxJTk4JUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFJUUzJTgyJUI3JUUzJTgyJUE3JUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg3JUUzJTgyJUEzJUUzJTgzJUIzJUUzJTgyJUIwJUVGJUJDJTg4JUVGJUJDJTkxJUVGJUJDJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wZDY4ZGYzNWRmMWRjMmZhYWViNTZlMTMyNWZiOWFhYQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkb3hhcyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MGZmYmRmOWY2NWFmYmViZGRmNzVmNTE4MTU0YmE1MDA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3d3dfbf98e256dad2d0be8f5a23778c1)
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLコンテンツをjQueryで作るJavaScriptライブラリ『jThree』
WebGLを使った3Dモデリングツールを作りました - ずっと君のターン
というのはウソで。 いやウソではないかもしれないけど、そんなガチな感じではなくて「こどもが適当に描いた落描きがなんとなく立体になったら面白い」くらいの空気感で作ってみた。実際、我が家の3才児でもそれなりに楽しそうに使えてたり。 要するにTeddyなんだけど、JS使ってブラウザ上でできたらおもしろそうだとたぶん5-6年くらい前から思ってて、やっと実装できたので今は新しいパンツをはいたばかりの正月元旦の朝のようにすっきり。（最近はブラウザで動く3Dスカルプトソフト既にいくつかあるみたいだけど・・・） https://github.com/technohippy/teddyjs 結構動作が重たいとはいえスマホでもそれなりに動くし、マウスを使うよりも指を使ったほうがずいぶん楽しい感じになるので、できればぜひスマホで試していただきたく。 https://technohippy.github.io/t
primroseeditor.com - primroseeditor リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
wgld.org | contribution: JSON モデルデータの読み込み |
Graphical Web ! 当テキストは Graphical Web Advent Calendar 2013 - Adventar への参加記事です。 Graphical Web という言葉は、なんとなく響きがかっこいいですね。HTML5、CSS3、そして我らが WebGL。いずれも、グラフィカルな側面を多く含む技術です。当サイトは WebGL の開発を支援するサイトですから、当然今回の企画にも WebGL にまつわる記事を寄稿させていただこうと思います。 今回のテーマは、JSON モデルデータの読み込みとレンダリングです。Advent Calendar から初めて当サイトに来られたという方もいらっしゃるでしょうから、今回はいろいろと当サイトの記事などを引用しつつ丁寧に解説してけたらと思います。 three.js と WebGL WebGL を用いた開発シーンでは、いまや欠かすことの
WebGL Water
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
Unity 5 の WebGL で外部からテクスチャを与える方法について調べてみた - 凹みTips
はじめに Unity 5 の WebGL 出力で、外部（自分で書いた JavaScript のコード）からテクスチャを与えたいと思い、色々調べてみましたので情報を共有したいと思います。通常の画像をテクスチャとして指定する方法と、base64 エンコードした画像をテクスチャとして指定する方法の２つを紹介します。 Unity 5 の WebGL については以前の記事をご参照ください。 Unity 5 x WebGL について詳しく調べてみた - 凹みTips デモ 後述の「base64 エンコードした画像を与える」の内容になります。Canvas に描いた絵をテクスチャとしてゲーム内で利用する事ができます。 1. 画像をテクスチャとして利用する 自分のサーバに置いてあるテクスチャを反映 以下の様なコードを書いたスクリプトを Cube にアタッチします。 using UnityEngine; us
WebGLでPortal Shieldとかを描く - すぎゃーんメモ
唐突にWebGLを勉強してみようと思って、練習として作ってみた。 http://sugyan-static.herokuapp.com/webgl/portalkey.html http://sugyan-static.herokuapp.com/webgl/portalshield.html (※WebGL対応ブラウザでご覧ください) WebGLについて全然知識が無かったので、このへんを読んで勉強した。 WebGL 開発支援サイト wgld.org CodeGrid 生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編) » nmi.jp 特に wgld.org は基礎から始まり詳しく解説しつつ徐々に色んな要素を盛り込んでいて、分かりやすいし楽しい。ひたすら写経しつつ読み進めることで、なんとなく3Dの描画のことが分かってきた(ような気になった)。 素晴らしいテキスト、本当にありがた
Three.jsのRaycasterを使って、画面内のオブジェクトを得る - Qiita
Three.jsのRaycasterクラスを使って、画面内のオブジェクトを取得するサンプル。 ざっくり手順を書くと、 マウス位置を取得 マウス位置をWebGL内の座標系に変換 マウス位置からまっすぐに伸びる光線ベクトルを生成 その光線とぶつかったオブジェクトを得る という手順。色々めんどくさいこともThree.jsがやってくれるので、以下のようにするだけで該当オブジェクトをさくっと得ることができる。 [2015.01.18 upate] unprojectメソッドは、Vectorクラスに移動したようです。 function onmousemove(e) { var rect = e.target.getBoundingClientRect(); // スクリーン上のマウス位置を取得する var mouseX = e.clientX - rect.left; var mouseY = e.c
HTML5の3D表現を身につけよう！簡単なJSではじめるWebGL版Away3D入門 - ICS MEDIA
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies
今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り！WebGL(Three.js)入門編」 募集開始！ で、本日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで（Chrome か Firefox の最新版が無難です）、おもいっきり堪能しちゃってください！ 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
Google I/O の WebGL セッションが素晴らしいのでハイライトを紹介してみる - WebOS Goodies
今週はみんな Google I/O に気を取られているだろうから、ブログの更新はサボろうかな…と思っていたのですが、なんとなく動画を見てみた WebGL セッションの内容があまりに素晴らしかったので、ハイライトをご紹介することにしました。 WebGL を活用するためのテクニックやパフォーマンス Tips などが解説されていて、 WebGL に関わっている方は必見です。また、けっこう見栄えの良いデモがいろいろ出てくるので、「WebGL ってなに？」という方でも楽しく見れると思います。 とはいえ、解説されている内容をきちんと理解するには WebGL の基礎知識が必須です。もしセッションを見て興味を持たれたら、こちらの記事もぜひご参照くださいませ。 前半は処理を GPU へ移行してパフォーマンス改善する例 最初にまず WebGL の基本概念を説明。その後、円や立方体などのオブジェクトをアニメーシ
SculptGL - A WebGL sculpting app
SculptGL is a small sculpting application powered by JavaScript and webGL.
WebGLでシェーダープログラム書こうぜ! | g200kg Music & Software
LiveBeatsでビジュアルエフェクトを幾つか作ってみたりしているんですが、さすがにJavaScriptのCanvas上で画像のピクセル単位の処理をごにょごにょしたりしているとパフォーマンスが厳しくなってきます。 まだもう少しはCanvasだけでも頑張れるかなぁと思いつつも、これに関してはもう進むべき道ははっきりしていてるんですよね。WebGLですよ、やっぱり。とは言え、GPUの性能をフルに引き出すにはシェーダープログラムをGLSLなる言語で書く必要がある所が結構な障壁になっています。という事でとっつきやすいTHREE.jsあたりを使って取りあえずJavaScriptでコントロールするだけでも今までとは一味違う表現ができるんですが... それでも満足できなくなったらこっち、GLSL Sandbox。GLSLでがしがし書いて即テストできるサイトで、ビジュアライザー系にそのまま使えそうなサン
Three.js でオリジナルシェーダを書く | ソフト職人
Three.js には豊富なシェーダも付属していますが、オリジナルのシェーダを書くことも出来ます。開発段階では付属のシェーダを使うのがお手軽ですが、見た目を追及するにはシェーダに手を入れる必要も出てきます。ということで、 Three.js でのオリジナルシェーダの書き方を調べてみました。 今回は次のサイトを参考にしました。 SHAGERS-part2- ShaderMaterial THREE.ShaderMaterial を使うとオリジナルシェーダを書くことが出来ます。上記のサイトでは THREE.MeshShaderMaterial を使っていますが、現状は内部的に同じものになっています。 26 行目からの initShaderMaterial() 内で ShaderMaterial を作成し、あとで作る Mesh に適用しています。 ShaderMaterial を作成しているところ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
