wwwtyro.net
Native line rendering in WebGL leaves a lot to be desired. There’s inconsistency in the implementation, so you can’t trust that the line width you want will be available to you, for example. It’s also missing some pretty important features, like line joins and caps. For these reasons, quite a bit of work has been done to implement custom line rendering - summarized expertly by Matt Deslauriers in
WebGL Report
WebGL Report You need to enable JavaScript to see WebGL.
WebGL と Emscripten で支えるお絵かき機能 - pixiv inside
こんにちは。pixiv Sketch（ピクシブスケッチ）チームでアルバイトをしているnontanです。pixiv Sketchは日々のお絵かきを今までよりもっと手軽に楽しめるコミュニケーションプラットフォームです。きちんとした絵だけではなく、落書きや描き途中の絵も気軽にシェアできることを目指して、日々開発をしています。 そのためにpixiv Sketchではブラウザ上でお絵描きができ、そのまま投稿できる機能を提供しています。このお絵かき機能は以前までCanvas 2D Contextベースで実装されていましたが、今年の3月にWebGLとEmscriptenを使って、よりパワフルにリニューアルされました。この記事では、WebGLとEmscriptenのそれぞれがお絵かき機能を実装する上で、どのように活用されているのか紹介します。 WebGL pixiv Sketchのお絵かき機能では、ブラシ
WebGL 総本山
WebSocket なども活用した面白い仕掛けがたくさん！ Rohit Kaushal さんのポートフォリオサイト WebGL GLSL demo たまに作者が降臨するポートフォリオ 今回ご紹介するのは、ソフトウェア・デベロッパーとして活動されている Rohit Kaushal さん（@_rohitkaushal ）のポートフォリオサイトです。 このサイト、私は Twitter 上でご本人がポストされているのをたまたま見つけてアクセスしました。... すごくポップで軽快な味付けのインタラクションがすてきな John Jattoh さんのポートフォリオサイト WebGL GLSL demo サクサクとテンポよく 今回ご紹介するのは、Product Designer の John Jattoh さんのポートフォリオサイトです。 サイトのタイトルに Product Designer という肩書の
WebGLでレイトレしてゲームを作ってみた - SEGA TECH Blog
すべての色をつなげよう WHOLE MATCH PUZZLE 操作方法 マウスのドラッグ（タッチパネルの場合はスライド）で玉を一列横か縦にスライドさせることが出来ます。 ルール 同じ色同士ですべての玉をつなげると一面クリアです。そのとき100点が加算されます。 ひとつの解答例。赤は赤同士、青は青同士、上下左右どこかでつながっていればよい。 クリアするたびに色が増えていき最大で５色まで難易度が上がります。 パズルの完成度（パーセント）がスコアの下２桁になります。 2分の制限時間内で可能な限り玉を消して高得点を狙ってください。 目指せ1000点！ ※最新のfirefoxとchromeで動作を確認しています。 また、一部のスマホでも動作を確認しています。 結果をツイート タイトルに戻る はじめに ドーモ、セガゲームスは開発技術部所属の栃木と申します。 業務ではライブラリの制作や絵周りのことでコー
wgld.org | WebGL: 頂点テクスチャフェッチ(VTF) |
頂点シェーダでテクスチャの参照 前回は浮動小数点数テクスチャを、WebGL の拡張機能によって利用可能とする方法を解説しました。 仕組みとしては利用できたとしても、ハードウェアの性能によっては開発側が意図した精度が得られるとは限らないこともあり、今後に期待の掛かる楽しみな機能でした。 さて、今回は拡張機能とは少し違いますが、前回解説した浮動小数点数テクスチャと組み合わせることによって、とてつもない効果を生み出すかもしれない頂点テクスチャフェッチ(vertex texture fetch)をやってみたいと思います。 頂点テクスチャフェッチは、その英語表記の頭文字を取って VTF などと呼ばれることもあります。近年のコンシューマゲームなどでも割と活躍している技術の一つで、その応用範囲はかなり広いと言っていいと思います。 頂点テクスチャフェッチとは、簡潔に言うなら[ 頂点シェーダ内でテクスチャを
WebGL - これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング - Qiita
これはWebGL Advent Calendar 15日目の記事です。 【2016/01/29 追記】続編である「これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜」を公開しました。 はじめに Three.jsからGPUをつかって、リアルタイムなレイトレーシングを実装できたので紹介します。 iPhone6などの携帯端末でも動作するくらい軽量です。次のリンクから動作の様子をご覧になってください！ Reflect カラフルな球体に周囲の球体や床を鏡面反射させました。 マウス移動によって、上からの視点にもできます。 無数の球体がずら〜っと並ぶ様子は、ちょっと壮観ですね！？ 一般的にレイトレーシングを行うためには、膨大な計算が必要です。 ソフトウェアで実装した場合、数個の球体を配置しただけでもリアルタイムに処理するのは困難です。 2010年の記事によると、For
GPU本来の性能を引き出すWebGL頂点データ作成法 - Qiita
この記事はWebGL Advent Calendar 2015の９日目の記事です。 ご注意 本記事は2015年当時に書いた記事なのですが、GPUがGeForce 8x00シリーズ以降、SIMDからSIMTという並列実行形式に切り替わった頃から状況が大きく変わりました。 以前は本記事でも紹介するインターリーブ形式の頂点データの方が高速だったのですが、現在のGPUでは多くの環境で非インターリーブの方が高速とされています。 AMD GPUにおいても、GCNアーキテクチャ（PS4以降の世代）から（それまでのVLIWから）SIMTに切り替わり、非インターリーブを推奨されているようです。 WebGLは基本的にネイティブ3D APIへのマッピングに過ぎないため、この傾向はおそらくWebGLでも同様と考えられます。 とはいえ、インターリーブ(AoS)や非インターリーブ(SoA)はCGをやる上でいずれ避けて
ゆるふわ自作WebGLライブラリを作ろう！ - Qiita
概要 この記事はWebGL Advent Calendar 2015 の５日目の記事です。 WebGLをThree.jsなどを介さずに、直に触ってみたい、あるいはそういうことに既にある程度慣れている層に向けた内容になります。 WebGLをより使いやすくするためのライブラリを自作してみようぜ！ という啓蒙（？）記事です。 WebGL Advent Calendar 2015について一言(20151205) ８日、９日、２５日がまだ空いていて、もったいないのでとりあえず９日も予約しました。残り時間的に２５日にしようかとも思ったんですが、非常に基礎的なことを書くつもりなので、そんなので最終日を飾るのもどうよ、ってことで９日にしました。 で、そうなんです。２５日はまだ余裕があるからともかく、８日が空いてるんですよ。どなたか、８日に小ネタでいいので書きませんか？ → @toyoshim さんが埋めて
GolangのOpenGL事情(WebGLも含むよ) - Qiita
WebGLアドベントカレンダーでの投稿です。Golangのアドベントカレンダーはまた別に書きます。 最近、GolangでOpenGLを書いているのですが、GolangのOpenGL事情についての情報がまとまっているものがあまりなかったのでまとめてみます。 Golang用の各種OpenGL/WebGLライブラリ 由緒正しいライブラリgo-gl Golangには昔からOpenGLのAPIを提供するgithubのOrganizationがあります。go-glというコミュニティです。 昔からある多くのパッケージがここのライブラリを参照しています。OpenGLを管理する非営利団体のKhronosの提供するファイルを元にバインディングを生成しているため、安全確実な堅実なライブラリです。2.1以降の各OpenGL/OpenGL ESのバージョンに対応しています。また、OpenGLを使ったクロスプラットフ
WebGL 総本山
あらゆる技術をトリッキーかつポップに使いこなす ikeryou さんの devdev Inc. がウェブサイトをリニューアル WebGL GLSL demo 楽しいギミックが満載 今回ご紹介するのは、devdev Inc. のコーポレートサイトです。 こちらは @ikeryou さんが代表を務めてらっしゃる法人のウェブサイトで、今回はリニューアルされたということだったので、ご紹介しようと思います。 WebGL を始めとした様々な技術を組み合わせた、ギミ... もはやこれは恒例行事！？ unshift の年賀コンテンツは音も楽しいインタラクティブコンテンツ WebGL GLSL demo ぜひともサウンド有効で楽しみたい 今回ご紹介するのは、WebGL 事例でもよく知られている unshift さんが公開されている年賀コンテンツです。 当サイトでは年始に世界各国の年賀コンテンツを紹介すること
WebGLのカレンダー | Advent Calendar 2015 - 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でリアルタイム画像処理 - Qiita
WebGL Advent Calender 1日目。 初投稿です、よろしくお願いします。 WebGLで画像処理やってみます。 今回施すのは以下のような画像の変換です。 セピア ネガポジ 色相の変更 https://dl.dropboxusercontent.com/u/27815754/movie_effect/image_effect.html WebGLは画像中の画素に対して並列演算を行うことに長けているので3Dだけでなくこういった応用ができます。 ソースコードはここに書き捨てていますので参考にしてみてください。 https://github.com/nyamadan/color_texture 仕組み 画素はR, G, Bの３成分を持ちます。 これをR', G', B'に変換します。 f(R, G, B) -> R', G', B' (あまり詳しくありませんが、単射という関係になって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リアルタイムレイトレーシング! — KaoriYa
webglinsights.com
WebGLのwebglcontextlostイベントについての考察 - DJ lemon-Sour's diary (prod.hisasann)
WebGL: 80.000 particles | Hacker News
BlacklistsAndWhitelists - WebGL Public Wiki
JS1k 2016 - Demo 2486 - "Romanesco 2.0"