How to port this shader to Processing 3?

edited April 2018 in GLSL / Shaders

Shader in question: https://shaderfrog.com/app/view/1078?view=shader

I'm a complete GLSL noob and was wondering how to go about applying this shader to an imported .obj in Processing.

My sketch is currently as follows:

PShape obj;
PShader shader;

void setup() {
  size(360, 720, P3D);
  obj = loadShape("mesh.obj");
  shader = loadShader("shaderFrogFrag.glsl", "shaderFrogVert.glsl");
}

void draw() {
  shader.set("color", 0.3, 0.8, 0.8);
  shader.set("secondaryColor", 0.2, 0.4, 0.7);
  shader.set("lightPosition", 0.6, 0.0, 2.0);

  shader(shader);

  translate(width/2, height/2);  
  shape(obj);
}

The shader code is directly from the site.

Vert:

/**
* Example Vertex Shader
* Sets the position of the vertex by setting gl_Position
*/

// Set the precision for data types used in this shader
precision highp float;
precision highp int;

// Default THREE.js uniforms available to both fragment and vertex shader
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;

// Default uniforms provided by ShaderFrog.
uniform vec3 cameraPosition;
uniform float time;

// Default attributes provided by THREE.js. Attributes are only available in the
// vertex shader. You can pass them to the fragment shader using varyings
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
attribute vec2 uv2;

// Examples of variables passed from vertex to fragment shader
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec2 vUv2;

void main() {

  // To pass variables to the fragment shader, you assign them here in the
  // main function. Traditionally you name the varying with vAttributeName
  vNormal = normal;
  vUv = uv;
  vUv2 = uv2;
  vPosition = position;

  // This sets the position of the vertex in 3d space. The correct math is
  // provided below to take into account camera and object data.
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

}

Frag:

/**
* Example Fragment Shader
* Sets the color and alpha of the pixel by setting gl_FragColor
*/

// Set the precision for data types used in this shader
precision highp float;
precision highp int;

// Default THREE.js uniforms available to both fragment and vertex shader
uniform mat4 modelMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;

// Default uniforms provided by ShaderFrog.
uniform vec3 cameraPosition;
uniform float time;

// A uniform unique to this shader. You can modify it to the using the form
// below the shader preview. Any uniform you add is automatically given a form
uniform vec3 color;
uniform vec3 secondaryColor;
uniform vec3 lightPosition;

// Example varyings passed from the vertex shader
varying vec3 vPosition;
varying vec3 vNormal;
varying vec2 vUv;
varying vec2 vUv2;

void main() {

  // Calculate the real position of this pixel in 3d space, taking into account
  // the rotation and scale of the model. It's a useful formula for some effects.
  // This could also be done in the vertex shader
  vec3 worldPosition = ( modelMatrix * vec4( vPosition, 1.0 )).xyz;

  // Calculate the normal including the model rotation and scale
  vec3 worldNormal = normalize( vec3( modelMatrix * vec4( vNormal, 0.0 ) ) );

  vec3 lightVector = normalize( lightPosition - worldPosition );

  // An example simple lighting effect, taking the dot product of the normal
  // (which way this pixel is pointing) and a user generated light position
  float brightness = dot( worldNormal, lightVector );

  // Fragment shaders set the gl_FragColor, which is a vector4 of
  // ( red, green, blue, alpha ).
  gl_FragColor = vec4( mix(secondaryColor,color,brightness), 1.0 );

}

The code compiles but the screen is blank. I'm not sure why. Does the implementation of OpenGL used in Processing have a different syntax? For example, I noticed that in the PShader guide (https://processing.org/tutorials/pshader/) there is a different capitalization scheme than on the site: like 'modelviewMatrix' vs. 'modelViewMatrix'.

So what exactly would I need to change to get the code working? Alternatively, if anybody has some links that could point me in the right direction it'd be greatly appreciated.

Tagged:

Answers

  • Answer ✓

    update: So after some playing around with the syntax, I got the shader working. I changed the following: modelView → modelview, modelViewMatrix → modelviewMatrix, modelMatrix → modelviewMatrix, uv → texCoord.

Sign In or Register to comment.