Applying vertex-shader in Processing

Processing Coding Questions
1

Hi, I tried to replicate parts of this (Three.js tutorial) in Processing. I managed to generate a custom 3D Sphere with the vertices spread according to the golden ratio, but I have trouble applying the vertex displacement shader. I don’t get any errors, but the shader is not applied.

Processing:

PShape sphere;
PShader shader;

void setup() {
  size(640, 360, P3D);
  background(0);
  smooth(16);
  sphere = createShape();
  
  float N = 1000;
  float inc = PI * (3 - sqrt(5));
  float off = 2/N;
  float radius = 100;

  sphere.beginShape(POINTS);
  sphere.noFill();
  sphere.stroke(255);
  for(int i = 0; i < N; i++) {
    float y = i * off - 1 + (off/2);
    float r = sqrt(1-y*y);
    float phi = i * inc;
    sphere.vertex(cos(phi)*r*radius, y*radius, sin(phi)*r*radius);
  }
  sphere.endShape();
  
  shader = loadShader("fragment.glsl","vertex.glsl");
  hint(DISABLE_OPTIMIZED_STROKE);
  
}

void draw() {
  background(0);
  shader.set("time", frameCount*0.2);
  shader(shader);
  shape(sphere, width*0.5, height*0.5);
}

Vertex Shader:

uniform float time;
uniform mat4 transform;
uniform mat4 projection;
uniform mat4 modelview;
attribute vec4 position;

void main() {
	vec4 p = position;
	p.y *= 0.1*(sin(p.y*20+time)*0.5+0.5);
	vec4 modelviewPosition = modelview * p;
	gl_PointSize = 10. * (1./ -modelviewPosition.z);
	gl_Position = projection * modelviewPosition;
}

Fragment Shader:

void main() {
	gl_FragColor = vec4(1., 1., 1., 0.6);
}
2

I messed around with your shader code and found that the issue is your point shader does not match the code for the working processing point shader. That code was listed on the old shader tutorial on the processing website, but it’s not there anymore (you can still access it with wayback machine though).
Anyway, here’s what the unmodified point vertex shader code looks like as copied from the site:

uniform mat4 projection;
uniform mat4 modelview;

attribute vec4 position;
attribute vec4 color;
attribute vec2 offset;

varying vec4 vertColor;

void main() {
  vec4 pos = modelview * position;
  vec4 clip = projection * pos;

  gl_Position = clip + projection * vec4(offset, 0, 0);
  vertColor = color;
}

and adding the steps to your vertex shader:

uniform mat4 projection;
uniform mat4 modelview;

attribute vec4 position;
attribute vec4 color;
attribute vec2 offset;

varying vec4 vertColor;
    
uniform float time;
    
void main() {
  vec4 p = position;
  p.y *= (sin(p.y*20.0+time)*0.5+0.5);
  vec4 modelviewpos = modelview * p;
  vec4 clip = projection * modelviewpos; // moved this
  vec4 point = clip + projection * vec4(offset, 0, 0); // missing this
  gl_Position = point;
  vertColor = color;
  gl_PointSize = 10. * (1./ -modelviewpos.z);
}

After using this code, things were moving. Hopefully this helps.

3

Thank you! I can get the sphere moving and also found a mistake in my code (should be p.y += …), but I cant get the effect from the video… the shader seems not to be moving the vertices at the same time, but one after the other, so no matter how much I try to adjust the numbers, I can never get that wavy motion…