バーテックスシェーダによる座標系変換 · けんごのお屋敷
OpenGL 基礎シリーズの第 3 回です。 座標変換 プリミティブの描画には頂点座標が必要なのはわかった。だって、座標情報がないとそもそもどこに描画していいのかがわからないんだから。でもよく考えてみて欲しい、この座標情報って どの座標系における座標 なんだろう？それって最初に出てきた右手座標系とかいう座標系じゃないの？うーん、そうなんだけどここで話したいのはそういうことじゃない。それじゃディスプレイ上の座標に配置してるに決まってるよ！いやいやそんなことはない。私達は今、OpenGL 上で 3D 空間を扱っている。でも現実のディスプレイは 2D の平面。はい、これらはそもそも次元が違う。 最初にバーテックスシェーダの概要を書いた時に座標系の変換過程を図に示したのを思い出してみると、3D 空間を扱うためには少なくとも 4 つの座標系があった。最初に頂点座標を配置した座標系から最終的にはクリッ
Shader Editor — Firefox Source Docs documentation
Warning This tool has been deprecated and will soon be removed from Firefox. For details, see Deprecated tools. The Shader Editor enables you to see and edit the vertex and fragment shaders used by WebGL. WebGL is a JavaScript API for rendering interactive 3D graphics and 2D graphics in the browser without using plugins. With WebGL you provide 2 programs called shaders which are called at the appr
smoothstep - Qiita
故あってsmoothstepという関数がなにをしているのか調べてみた。 仕様書によると、Hermite interpolationというのをやってくれるようだ。(読み方がわからない。) Returns 0.0 if x less than or equal to edge0 and 1.0 if x greater than or equal to edge1 and > performs smooth Hermite interpolation between 0 and 1 when edge0 < x < edge1. This is useful in cases where you would want a threshold function with a smooth transition. 仕様書通りにJavaで実装してみる。 public static float smo
GLSLを使ってワンランク上の表現を！ Three.jsでのぷるぷるシェーダーの作り方 - ICS MEDIA
WebGLはウェブページに3D表現を組み込むための技術です。そのWebGLを扱いやすくしたJSライブラリの「Three.js」。Theee.jsとシェーダー言語GLSLを組み合わせてプリンが揺れるデモを作成しました。本記事では、Three.jsでシェーダー言語を利用する手順を解説します。 使用技術について GLSLとはOpenGL Shading Languageの略でその名の通り、OpenGL(WebGL)で使用できるシェーディング言語です。WebGLではライブラリを使用しない場合は、このシェーディング言語を使用してシェーダー（3D描画のための一連の計算セット）を自力で作成しなければなりません。WebGLのシェーダーは2種類あり、バーテックスシェーダーでは頂点の情報を画面上に反映し、フラグメントシェーダーではピクセル単位での描画を行います。今回はバーテックスシェーダーで頂点の位置をずらし
DCTでJPEGっぽいエフェクトを作るやつ - Qiita
本記事は WebGL Advent Calendar 2017 の12月21日向けに投稿した記事です。 前書き こんにちは、猫です。 普段はWebGLを使ってイケイケなグラフィックを作ることを試みています。できません。 最近では、Datamosh・JPEG風エフェクト・Pixelsortなどのグリッチ表現をシェーダで実装して「これリアルタイムだぜーすごいだろー」と映像勢に自慢することにハマっています。 今回はその中でも一番説明が楽な納得できる結果が得られた、DCTを用いたJPEG風シェーダについて書いてみます。 見た目・デモ せっかくなので画像やWebCamで使えるようにしました。 （悲報: fms-cat.com、httpsじゃないからWebCam使えない） 概要 JPEGの圧縮に用いられている、YCbCr変換・DCT・量子化を行うことにより、JPEG風の画像劣化をエフェクトとしてリアル
床井研究室 - 第１２回 模様を付ける
877.fm 実は今日知ったんですけど, 和歌山市内にある "バナナ FM" (877.fm, エフエム和歌山) は, 株式会社ではなく NPO 法人なんですね. この放送局は空中線電力が 20W しかなく, サービスエリアが和歌山市とその周辺くらいしかありません. 番組内容も独自のもので, メジャーなタレントを呼ぶとかそういうこともなく, 時には高校のブラスバンドの演奏を流したりして, それはもう地味というか, 地元に密着した内容になってます. どこかのテンションがやたら高い放送局と違って DJ も日常会話のように自然にしゃべっていて, 気負いがありません. いいです. 日々の生活に実にフィットします. CM にも「近所のあの店が CM してる!」という親しみやすさがあります. 私はこの放送局と縁もゆかりもありませんが, 永く続いて欲しいと思ってるので, 皆さん応援してあげてください.
【Unite 2017 Tokyo】『Shadowverse』のカード制作におけるスキル構築の効率化やグラフィック演出の仕組みを紹介 | gamebiz
【Unite 2017 Tokyo】『Shadowverse』のカード制作におけるスキル構築の効率化やグラフィック演出の仕組みを紹介 マルチプラットフォーム向け統合開発環境「Unity」を提供するユニティ・テクノロジーズ・ジャパンは、5月8日～9日の2日間、Unityに関する国内最大のカンファレンスイベント「Unite 2017 Tokyo」を東京国際フォーラムで開催した。日本では2012年から始まり、今年で6年目となるUnite 2017 Tokyoは、UnityユーザーによるUnityユーザーのためのテクニカルな講演やブース出展が数多く行われる、開発者同士の交流を体験できるイベントだ。 本稿では、5月9日12時50分より行われた、「『Shadowverse開発事例』～美麗カードが動く！制作テクニックのすべて～」についてのレポートをお届けしていく。 なお、本講演には、Cygamesのエン
WebGLで抑えておきたいシェーダーの定番画像処理8選 – ICS MEDIA
WebGLのシェーダーGLSLでの画像処理の作り方（モノクロ、セピア、モザイク、渦巻き） WebGLを使うと画像処理が実現でき、HTMLコンテンツに多彩なグラフィカル表現をもたらすことができます。たとえば、表示をモノクロームやモザイクにするといった画像エフェクトは簡単に実現できます。 WebGLはGPUの恩恵を受けれるため高速に実行でき、他の代替手法（canvas要素Context2Dオブジェクトによる画像処理等）よりも負荷が軽いのが利点です。 今回はWebGLの定番JSライブラリ「Three.js」とGLSLというシェーダー言語を使った、9種類の画像処理の実装方法を紹介します。ソースコードは「GitHub」からダウンロードして読み進めてください。 サンプルを試してみよう 次のサンプルでは複数のシェーダーを適用できます。画面左上のチェックボックスで画像加工を選択でき、ラジオボタンから画像と
床井研究室 - 第３回 テクスチャの参照
昭和テイスト 研究室のミーティングで学生さんに対して「当たり前田のクラッカー！」っていう具合に突っ込みを入れたら，「昭和テイストだなぁー」とか「世代が違いますよ，世代が」とか散々な言われ方をしました．私，やっぱり旧い人なんでしょうか？（聞くまでもないか）そういえば以前，奥さんに「おさじとって」と言ったら，「はい，スプーン」と訂正されてしまいました．昭和は遠くなったもんだ（違 テクスチャを参照する シェーダプログラムの中でもテクスチャを参照することができます．もちろん，マルチテクスチャが使えます．複数のテクスチャを組み合わせた処理を手続きで書けるってあたりが，シェーダプログラミングの醍醐味でしょう． とりあえず，前回のプログラムにテクスチャに使う画像を読み込む処理を追加します．テクスチャには，以前に使ったこの画像を使います．なお本題とは関係ありませんが，以下のプログラムでは OpenGL 1
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!
シェーディング言語 - Wikipedia
この記事には複数の問題があります。改善やノートページでの議論にご協力ください。 出典がまったく示されていないか不十分です。内容に関する文献や情報源が必要です。（2015年2月） 大言壮語的な記述になっています。（2015年2月） 言葉を濁した曖昧な記述になっています。（2015年2月） 出典検索?: "シェーディング言語" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL シェーディング言語（英: shading language）は、プログラマブルシェーダー向けのプログラミング言語のこと。この種の言語は色や法線のような特別なデータ型を持っている。C言語やJavaのような汎用言語とは異なり、標準入出力機能を持たないなど、特定領域に特化したドメイン固有言語の一種である。3次元コンピュータグラフィックスの様
GLSL - Wikipedia
ビデオゲームはリアルタイムでレンダリングの計算をOpenGL経由でGPUにアウトソーシングする。シェーダーはOpenGL Shading Languageで書かれ、コンパイルされる。コンパイルされたプログラムはGPUで実行される。 GLSL (OpenGL Shading Language) はGLslangとしても知られ、C言語の構文をベースとした高レベルシェーディング言語である。これはアセンブリ言語やハードウェアに依存した言語を使わないで、アプリケーションソフトウェア開発者がグラフィックスパイプラインを直接制御できるようにOpenGL ARB (Architecture Review Board) [1]で策定された。 背景[編集] Direct3D 7までの時代、すなわち1990年代までのリアルタイム3Dコンピューターグラフィックスは、OpenGLやDirect3DといったAPIを通
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenGL, GLSL, FBO oh my!
How can I mask videoGrabber with a fragment shader? - openFrameworks forum