WebGL と Emscripten で支えるお絵かき機能 - pixiv inside
こんにちは。pixiv Sketch（ピクシブスケッチ）チームでアルバイトをしているnontanです。pixiv Sketchは日々のお絵かきを今までよりもっと手軽に楽しめるコミュニケーションプラットフォームです。きちんとした絵だけではなく、落書きや描き途中の絵も気軽にシェアできることを目指して、日々開発をしています。 そのためにpixiv Sketchではブラウザ上でお絵描きができ、そのまま投稿できる機能を提供しています。このお絵かき機能は以前までCanvas 2D Contextベースで実装されていましたが、今年の3月にWebGLとEmscriptenを使って、よりパワフルにリニューアルされました。この記事では、WebGLとEmscriptenのそれぞれがお絵かき機能を実装する上で、どのように活用されているのか紹介します。 WebGL pixiv Sketchのお絵かき機能では、ブラシ
pixiv Night #03（WebGL, React, お絵かきツール技術） (2017/04/05 19:00〜)
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
Three.js r83で何が変わったのか - 株式会社カブク
はじめに 想定より遅くて今月はもう出ないかと思っていたThree.jsのr83がやっと出たので、この際なので突如欠員が出たThree.js Advent Calendarの一記事ということにしてざっくり変更点をまとめます。Advent Calendarがなくてもどのみち同じようなエントリを上げていたと思いますが。 要点 大きいのは遂にWebGL2Rendererが入りWebGL2対応が正式に始まったことでしょうか。FirefoxもChromeも次のバージョンからWebGL2がフラグなしで有効になるようなので、我々開発者も少しずつ慣れておいたほうがいいかもしれません。WebGL2以外では今回から追加された面光源も場所を選べば効果的に利用できそうでうれしいところです。 コードの変更点 ということで以下、r83のリリースノートの要約です。 バグフィックス Audio回りの不具合が修正されたようで
レイマーチングで潜れる雲を作る - Qiita
この記事は，WebGL Advent Calendar 2016 20日目の記事です。 doxasさんやgam0022さんのレイマーチングの作品を見て面白そうだったので挑戦してみようと思います。 目的 ところでこの記事を見ている方はエースコンバットというゲームをご存知でしょうか。 超遠距離のオブジェクトや、雲や煙のような形が定まっていない物ばかりが描画されるゲームです。 プログラミングを学び始めた頃は、こういったものがどうやったら表示出来るのか全くわかりませんでしたが、今なら少し再現できそうです。 そこで、今回はその第一歩としてレイマーチングの力を借りて、リアルな雲を描画してみたいと思います。 方法 「よし、レイマーチングでボリュームレンダリングをしよう！」と思っても、よく考えたらなにをしたら良いのかわかりません。 というかボリュームレンダリングって何？ https://ja.wikipe
three.js + キューブマップでお手軽IBL - Qiita
この記事は，WebGL Advent Calendar 2016 16日目の記事です。 今年も何もしてないなぁと思いながら生きていたのですが、WebGLで色々成果を挙げている友人に感化されて飛び入り参加しました。よろしくお願いします。 今回は環境マップでよく利用されているキューブマップを使って、WebGL上で擬似的なIBLを、拡張機能を利用する方法としない方法の2つ実装しました。 この記事では実装の中で得た知見を共有できればと思います。 今回作ったもの https://github.com/kaneta1992/cubemapIBL IBL(Image Based Lighting)とは IBLと略すこともある。実在する風景の写真や高精細な画像をライティングの色情報に使用して、シーンをレンダリングする方法。広いレンジの明るさ情報を記録できるHDRIを用いることで、自然な光と陰影を表現できる
emscriptenとOpenGL ES2.0でhello, world - simpgの日記
emscriptenがOpenGL ES 2.0(WebGL)+GLUTをサポートしているので、OpenGL ES2.0で"hello, world"。emscriptenのセットアップはこちら。 emscripten/tests/hello_world_gles.cpp emscripten/tests/glbook/Chanpter_9/Simple_Texture2D を参考に作成。(200行くらいになってしまったので記事の最後にhello.cを貼りました。) glutBitmapCharacterは使えるか不明だったのでテクスチャで"HELLO, WORLD"を表示する。 まずは、GLEWを使ってgccでビルド。 $ sodo apt-get install freeglut3-dev libglew1.6-dev $ gcc hello.c -l glut -lGLEW -o h
iOS/MetalのシェーダをWebGL/GLSLから移植する - その後のその後
Metalでグラフィック処理を行うにしろ並列演算を行うにしろ、GPUに処理をさせるためのシェーダを書かないといけないわけですが、これがまだ情報が少なくて、「こういうシェーダを書きたいんだけど、誰かもう書いてないかな・・・」というときに参考になる近いものとかはそうそう都合よく出てこないわけです。 ただ、WebGL/GLSLの情報はググると山ほどあって、GLSL Sandbox という、Web上で編集できてプレビューできてシェアできるサイトもあり、何がどうなってそうなるのか理解できない難しそうなものから、ただの円といったシンプルなものまで、既に偉大な先人たちのサンプルがたくさんアップされています Metalのシェーダというのは正しくは Metal Shading Language といいまして、C++をベースとする独自言語なのですが、まー概ねGLSLと一緒です。 実際にやってみたところ、GLS
シェーダだけで世界を創る！three.jsによるレイマーチング
2016/02/14 シェーダだけで世界を創る！three.jsによるレイマーチング GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 @gam0022Read less
今年もやります！ 短期集中 GLSL スクール 2016 受講者募集開始！！ - WebGL 総本山
2016 年 10 月開講 GLSL は WebGL や OpenGL で利用できる シェーダ記述言語 です。近年では、WebGL や Unity などのゲームエンジンの普及に後押しされるように、GLSL を利用する場面がこれまでには無かったようは広がりを見せています。 ハイエンドなゲームや CG 作品の制作・創作に利用されてきた GLSL は、今日ではより気軽で身近なものになりつつあります。これは WebGL の登場によって決定的になりました。ウェブブラウザという誰にとっても馴染み深いアプリケーション上で、自分自身の記述したシェーダが軽やかに動いている様子はなんとも心地よいものです。しかもそれが、インターネットを通じて世界中に配信できるわけですから、すごい時代だなと感じます。 本スクールは、そんな GLSL を利用したクリエイティブなシェーダコーディングを学ぶことができるスクールです。
MMD on WebGL 番外編・本当は恐ろしい Lat 式 - by edvakf in hatena
MMD on WebGL は GitHub では MMDGL.js というプロジェクトだったんですが、nyamadan さんの mmdgl-coffee っていうプロジェクトが既にあったことに気づいたので、名前を変えました。 幸い MMDGL.js という名前は宣伝して来なかったので、この際 MMD.js という直球な名前にしました。まあプロジェクト名は全面に押し出すつもりもないし、これまでどおり MMD on WebGL という呼び方をすると思うので。 https://github.com/edvakf/MMD.js 本当にあざとい Lat 式 衝撃の初音ミク3Dモデル 衝撃というよりは笑撃と変な当て字を使ってしまいたいぐらい、衝撃を受けてなんか笑っちゃいます。 こんな3Dモデル見たことなかったよ・・・。 衝撃の初音ミク3Dモデル: GA-j blog Lat 式は特殊だ、とよく言われま
MMD on WebGL レンダリング部分のマイナーチェンジ - by edvakf in hatena
Lat 式を表示できるようにして以来の変更。 Lat 式と構造の似ている ulaP さんの雪歌ユフを表示してみたところ、なんかヒゲができてしまった。 それ以外はほとんど同じなのになぜ… とアレコレ捻り回して眺めてたら、顔の前にほぼ真透明の材質があることに気づいた。左が透過を有効にした法線マップ。右が透過無効の法線マップ。 この前は気づかなかったけど Lat 式も同じようになってたみたい。 これを見て閃いた。もしかすると透明な材質の奥ではエッジを描画しないことになっているのでは？ ということで「透明な髪」でピンと来たデフォ子（byななみさん）で試してみたら、予想は当たってたっぽい。（赤で囲んだところ） それでまた色々試した結果、レンダリング部分をこういう感じから gl.enable(gl.CULL_FACE); gl.enable(gl.BLEND); gl.blendFuncSeparat
WebGLを使ってブラウザ上で3Dモデルを描画した話 - DMM.comラボエンジニアブログ
皆様、はじめまして！DMM.com Labo システム本部 事業サービス開発部の久野です。この度、社内の勉強会のLTで話した内容をまとめてみました！ 内容はWebGLというJavaScriptのAPIを使って、ブラウザ上で3Dモデルをアニメーション付きで描画するために何を行ったのか、です。 ▼実際に動作するデモです。 テクスチャを大量に読み込まなければならないので表示まで時間がかかるかもしれません。 ▲ブラウザによっては動作しない可能性がありますがデモプログラムなので悪しからず。 WebGLとはなんぞや？ WebGLとはKronos Groupが管理するOpenGL ES 2.0をブラウザ上のJavaScriptから扱えるようにしたAPIです。GPU(グラフィックカードまたはグラフィックボード)の機能を駆使して高度な3D描画を高速に行うことが出来、昨今のPC、スマートフォン等の主要なブラウ
WebGL 2.0の概要 - Qiita
はじめに この記事では、WebGL 2.0について概要レベルで説明します。 「あれ？ いつもみたいに細かくやらないの？」というツッコミもあるかもしれませんが、本記事、実は私が最近始めた「WebGL Learning Path JP」というWebGL学習支援紹介サイトのコンテンツの一部としてリンクすることを前提にしているものですので、そんな流れになっています。 そのうち細かい説明も別の記事でやるかもしれませんが…、ひとまず今回は概要レベルです。 すでに概要を説明されている先人がいた…。 皆さんご存知、WebGLといえば学習スクール等も運営されている @doxas さんが、かなり昔にWebGL 2.0についてのスライドを公開されています。 当時から目をつけてたって、すごいよ…。 WebGL 2.0の概要：「WebGL 2.0 は WebGL 1.0の増強版だ！」 @doxasさんのスライドと同
WebGL Path Tracing
Path tracing is a realistic lighting algorithm that simulates light bouncing around a scene. This path tracer uses WebGL for realtime performance and supports diffuse, mirrored, and glossy surfaces. The path tracer is continually rendering, so the scene will start off grainy and become smoother over time. Here's how to interact with it: Add an object using the "Add Sphere" or "Add Cube" buttons
これがGPUの力！three.jsによる“リアルタイム”なレイトレーシング 〜宝石編〜 - Qiita
これはWebGL Advent Calendar 2015 23日目の記事（の代打1）です。 また、WebGL Advent Calendar 2015 15日目の記事である「これがGPUの力！Three.jsによる“リアルタイム”なレイトレーシング」の続編です。 はじめに 今夜は雪だそうですね。こんな寒い日にはGPUをぶん回して暖をとりましょう！ 光の屈折をシミュレートすることで、輝く宝石をWebGLでレンダリングする「gem」という作品（技術デモ）をつくりました。レイトレーシングをGLSLのフラグメントシェーダで実装することで、GPUの並列計算を利用したリアルタイムな描画を実現しています。 WebGLで動くので、次のリンクを開くとブラウザ上でそのまま動作します。PCだけでなくiPhone6でも動作を確認しています。 webgl Raytracing example - gem 宝石の屈
[超大量増員！] GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 (2016/02/14 15:00〜)
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
![[超大量増員！] GPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会 (2016/02/14 15:00〜)](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc80a73f2451ad7a25dc0bfe37a08356fc542259/height=288;version=1;width=512/https%3A%2F%2Fconnpass.com%2Fstatic%2Fimg%2F468_468.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGLNext-Proposals/Obsidian-Mozilla at main · KhronosGroup/WebGLNext-Proposals
WebGL 2.0 Samples
まさかの EU 日産公式！？ 素晴らしいディティールの WebGL 製カービューアがすごい！ - WebGL 総本山
Texture Format Tester