情報メディア基礎ゼミ/2018/第6回
をテンプレートにして作成
開始行:
**シェーダー [#a723d9d9]
ここではシェーダの基礎を学びます.
** 準備 [#g44eca36]
モデル1個とライトが1つある基本的なシーンを用意します.
void setup()
{
size(640, 480, P3D);
}
void draw()
{
background(127, 127, 127);
camera(100, -100, 100, 0, 0, 0, 0, 1, 0);
axis(100);
fill(255, 0, 0);
noStroke();
directionalLight(255, 255, 255, -1, 1, 0);
sphere(30);
}
void axis(float l)
{
stroke(255, 0, 0);
line(0, 0, 0, l, 0, 0);
stroke(0, 255, 0);
line(0, 0, 0, 0, l, 0);
stroke(0, 0, 255);
line(0, 0, 0, 0, 0, l);
}
#ref(./lightrot.png,50%);
**シェーダーとは [#sd18281c]
これまで,3DCGを描くため光源の設定などを行いました.例え...
directionalLight(255, 255, 255, -1, 1, 0);
のように記述しました.
では,実際に配置されたモデルと光源はどのように計算されて...
Processing2.0からはシェーダがその計算を行っています.
シェーダはプログラムから渡されたモデルの情報(頂点の位置...
**シェーダを使ってみる [#z02f494d]
Processingがデフォルトで使用しているシェーダをやめて,自...
PShader shader;
void setup()
{
size(640, 480, P3D);
shader = loadShader("FragmentShader.glsl", "VertexShad...
}
void draw()
{
background(127, 127, 127);
camera(100, -100, 100, 0, 0, 0, 0, 1, 0);
axis(100);
fill(255, 0, 0);
noStroke();
directionalLight(255, 255, 255, -1, 1, 0);
shader(shader);
sphere(30);
}
void axis(float l)
{
stroke(255, 0, 0);
line(0, 0, 0, l, 0, 0);
stroke(0, 255, 0);
line(0, 0, 0, 0, l, 0);
stroke(0, 0, 255);
line(0, 0, 0, 0, 0, l);
}
シェーダである以下2つのファイル,VertexShader.glsl,Fragm...
VertexShader.glsl:
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform vec3 lightNormal;
attribute vec4 vertex;
attribute vec4 color;
attribute vec3 normal;
varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;
void main() {
gl_Position = transform * vertex;
vertColor = color;
vertNormal = normalize(normalMatrix * normal);
vertLightDir = -lightNormal;
}
FragmentShader.glsl:
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
#define PROCESSING_LIGHT_SHADER
uniform float fraction;
varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;
void main() {
float intensity;
intensity = max(0.0, dot(vertLightDir, vertNormal));
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
}
**シェーダの書き換え [#v9abd0ce]
[Sketch]→[Show Sketch Folder]で,現在のSketchのフォルダを...
例えば,モデルを描画する際の,各画素の色はFragmentShader....
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
試しに,以下のように変更してみましょう.
gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
#ref(./fragshader.png,50%);
モデルの色を赤と指定しているのに関わらず,モデルが青にな...
RGBA=(0.5, 0.5, 1.0, 1.0);
とするようにシェーダを書き換えたためです.
元々のプログラムがどういう意味か解説していきます.
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
vertColorにはモデルの色が入っていますRGBA=(1, 0, 0, 1)....
intensity = max(0.0, dot(vertLightDir, vertNormal));
vertLightDirは光源の向きの反対ベクトル,vertNormalはモデ...
#ref(./lighting.png,50%);
例えば,内積の値を透明度にするよう設定してみます.
gl_FragColor = vec4(vertColor.xyz * intensity, intensi...
光が当たっている個所は不透明で,当たらない個所は透明とな...
#ref(./trans.png,50%);
このようにシェーダを書き換えることで,Processingが用意す...
**課題 [#q5cd2c18]
シェーダを書き換えて,オリジナルな表現を行え.~
ヒント:[File]→[Examples]の,[Topics]→[Shaders]にいろいろ...
終了行:
**シェーダー [#a723d9d9]
ここではシェーダの基礎を学びます.
** 準備 [#g44eca36]
モデル1個とライトが1つある基本的なシーンを用意します.
void setup()
{
size(640, 480, P3D);
}
void draw()
{
background(127, 127, 127);
camera(100, -100, 100, 0, 0, 0, 0, 1, 0);
axis(100);
fill(255, 0, 0);
noStroke();
directionalLight(255, 255, 255, -1, 1, 0);
sphere(30);
}
void axis(float l)
{
stroke(255, 0, 0);
line(0, 0, 0, l, 0, 0);
stroke(0, 255, 0);
line(0, 0, 0, 0, l, 0);
stroke(0, 0, 255);
line(0, 0, 0, 0, 0, l);
}
#ref(./lightrot.png,50%);
**シェーダーとは [#sd18281c]
これまで,3DCGを描くため光源の設定などを行いました.例え...
directionalLight(255, 255, 255, -1, 1, 0);
のように記述しました.
では,実際に配置されたモデルと光源はどのように計算されて...
Processing2.0からはシェーダがその計算を行っています.
シェーダはプログラムから渡されたモデルの情報(頂点の位置...
**シェーダを使ってみる [#z02f494d]
Processingがデフォルトで使用しているシェーダをやめて,自...
PShader shader;
void setup()
{
size(640, 480, P3D);
shader = loadShader("FragmentShader.glsl", "VertexShad...
}
void draw()
{
background(127, 127, 127);
camera(100, -100, 100, 0, 0, 0, 0, 1, 0);
axis(100);
fill(255, 0, 0);
noStroke();
directionalLight(255, 255, 255, -1, 1, 0);
shader(shader);
sphere(30);
}
void axis(float l)
{
stroke(255, 0, 0);
line(0, 0, 0, l, 0, 0);
stroke(0, 255, 0);
line(0, 0, 0, 0, l, 0);
stroke(0, 0, 255);
line(0, 0, 0, 0, 0, l);
}
シェーダである以下2つのファイル,VertexShader.glsl,Fragm...
VertexShader.glsl:
uniform mat4 transform;
uniform mat3 normalMatrix;
uniform vec3 lightNormal;
attribute vec4 vertex;
attribute vec4 color;
attribute vec3 normal;
varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;
void main() {
gl_Position = transform * vertex;
vertColor = color;
vertNormal = normalize(normalMatrix * normal);
vertLightDir = -lightNormal;
}
FragmentShader.glsl:
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
#define PROCESSING_LIGHT_SHADER
uniform float fraction;
varying vec4 vertColor;
varying vec3 vertNormal;
varying vec3 vertLightDir;
void main() {
float intensity;
intensity = max(0.0, dot(vertLightDir, vertNormal));
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
}
**シェーダの書き換え [#v9abd0ce]
[Sketch]→[Show Sketch Folder]で,現在のSketchのフォルダを...
例えば,モデルを描画する際の,各画素の色はFragmentShader....
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
試しに,以下のように変更してみましょう.
gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
#ref(./fragshader.png,50%);
モデルの色を赤と指定しているのに関わらず,モデルが青にな...
RGBA=(0.5, 0.5, 1.0, 1.0);
とするようにシェーダを書き換えたためです.
元々のプログラムがどういう意味か解説していきます.
gl_FragColor = vec4(vertColor.xyz * intensity, 1.0);
vertColorにはモデルの色が入っていますRGBA=(1, 0, 0, 1)....
intensity = max(0.0, dot(vertLightDir, vertNormal));
vertLightDirは光源の向きの反対ベクトル,vertNormalはモデ...
#ref(./lighting.png,50%);
例えば,内積の値を透明度にするよう設定してみます.
gl_FragColor = vec4(vertColor.xyz * intensity, intensi...
光が当たっている個所は不透明で,当たらない個所は透明とな...
#ref(./trans.png,50%);
このようにシェーダを書き換えることで,Processingが用意す...
**課題 [#q5cd2c18]
シェーダを書き換えて,オリジナルな表現を行え.~
ヒント:[File]→[Examples]の,[Topics]→[Shaders]にいろいろ...
ページ名: