前回に引き続き、openFrameworksでShader (GLSL) を使用した高度な表現に挑戦します! 前回はFragment Shader (フラグメントシェーダー / ピクセルシェーダー) のみを使用しました。今回はさらにVertex Shaderを記述して3D空間に配置されたオブジェクトの表面にシェーダーによるアニメーションするパターンを描画します。この手法を応用することで、様々な3D表現が可能となります!

スライド資料

• openFrameworks + Shader (GLSL) 応用

サンプルファイル

• サンプルファイル

※古いマシン (特にMac) などでOpenGL 4.3以上に対応していない場合は下記のサンプルを使用してください

• サンプルファイル(Mac/古いマシン用)

汎用的に使用可能なvertex/fragment shaderのテンプレート

shader.vert

#version 430

in vec4 position;
in vec4 color;
in vec3 normal;
in vec2 texcoord;

uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 textureMatrix;
uniform mat4 modelViewProjectionMatrix;
uniform float usingTexture;
uniform float usingColors;
uniform vec4 globalColor;
uniform sampler2D src_tex_unit0;

out Vertex {
  vec4 worldSpacePos;
  vec4 color;
  vec3 normal;
  vec2 texcoord;
} oVert;

void main() {
  gl_Position = modelViewProjectionMatrix * position;
  oVert.worldSpacePos = position;
  oVert.color = color;
  oVert.normal = normal;
  oVert.texcoord = texcoord;
}

shader.frag

#version 430

uniform float u_time;

in Vertex {
  vec4 worldSpacePos;
  vec4 color;
  vec3 normal;
  vec2 texcoord;
} iVert;

out vec4 fragColor;

void main() {
  vec3 vUV = iVert.worldSpacePos.xyz;
  //...  
  fragColor = vec4(r, g, b, a);
}

アンケート

本日の講義に参加した方は以下のアンケートに回答してください。

• アンケート