Merge pull request #7675 from lukeplowden/dev-2.0

Bug fixes for Shader API

Author: davepagurek

preview/global/sketch.js

@@ -1,94 +1,124 @@
 p5.disableFriendlyErrors = true;
+
 function windowResized() {
   resizeCanvas(windowWidth, windowHeight);
 }
 
-let myModel;
 let starShader;
 let starStrokeShader;
 let stars;
-let ditheringShader;
 let originalFrameBuffer;
-let blurredFrameBuffer;
+let pixellizeShader;
+let fresnelShader;
+let bloomShader;
+
+function fresnelShaderCallback() {
+  const fresnelPower = uniformFloat(2);
+  const fresnelBias = uniformFloat(-0.1);
+  const fresnelScale = uniformFloat(2);
+  getCameraInputs((inputs) => {
+    let n = normalize(inputs.normal);
+    let v = normalize(-inputs.position);
+    let base = 1.0 - dot(n, v);
+    let fresnel = fresnelScale * pow(base, fresnelPower) + fresnelBias;
+    let col = mix([0, 0, 0], [1, .5, .7], fresnel);
+    inputs.color = [col, 1];
+    return inputs;
+  });
+}
 
 function starShaderCallback() {
   const time = uniformFloat(() => millis());
+  const skyRadius = uniformFloat(1000);
+  
+  function rand2(st) {
+    return fract(sin(dot(st, [12.9898, 78.233])) * 43758.5453123);
+  }
+
+  function semiSphere() {
+    let id = instanceID();
+    let theta = rand2([id, 0.1234]) * TWO_PI;
+    let phi = rand2([id, 3.321]) * PI+time/10000;
+    let r = skyRadius;
+    r *= 1.5 * sin(phi);
+    let x = r * sin(phi) * cos(theta);
+    let y = r * 1.5 * cos(phi);
+    let z = r * sin(phi) * sin(theta);
+    return [x, y, z];
+  }
+
   getWorldInputs((inputs) => {
-    inputs.position.y += instanceID() * 20 - 1000;
-    inputs.position.x += 40 * sin(time * 0.001 + instanceID());
+    inputs.position += semiSphere();
     return inputs;
   });
+
   getObjectInputs((inputs) => {
-    inputs.position *= sin(time*0.001 + instanceID());
+    let scale = 1 + 0.1 * sin(time * 0.002 + instanceID());
+    inputs.position *= scale;
     return inputs;
-  })
+  });
 }
 
-function ditheringCallback() {
-  const time = uniformFloat(() => millis())
-  
-  function rand(co) {
-    return fract(sin(dot(co, [12.9898, 78.233])) * 43758.5453);
-  }
-  
-  function grayscale(col) {
-    return dot([col.x, col.y, col.z], [0.21, 0.72, 0.07])
-  }
-
+function pixellizeShaderCallback() {
+  const pixelSize = uniformFloat(()=> width*.75);
   getColor((input, canvasContent) => {
-    let col = texture(canvasContent, input.texCoord);
-    col.z = 0.55;
-    col += rand(input.texCoord +  time/10000000000) * 0.15 - 0.05;
-    let greyscaleValue = grayscale(col);
-    col.x = greyscaleValue
-    col.y = greyscaleValue
+    let coord = input.texCoord;
+    coord = floor(coord * pixelSize) / pixelSize;
+    let col = texture(canvasContent, coord);
     return col;
   });
 }
 
-function bloom() {
-  const blurred = uniformTexture(() => blurredFrameBuffer);
-  const original = uniformTexture(() => originalFrameBuffer);
-
+function bloomShaderCallback() {
+  const preBlur = uniformTexture(() => originalFrameBuffer);
   getColor((input, canvasContent) => {
-    const blurredCol = texture(blurred, input.texCoord);
-    const originalCol = texture(original, input.texCoord);
-    const brightPass = max(originalCol - 0.0, 0.0) * 3.0;
-    // const bloom = original + blurred * brightPass;
-    // return bloom;
-    return texture(blurred, input.texCoord) + texture(original, input.texCoord);
+    const blurredCol = texture(canvasContent, input.texCoord);
+    const originalCol = texture(preBlur, input.texCoord);
+    const brightPass = max(originalCol, 0.3) * 1.5;
+    const bloom = originalCol + blurredCol * brightPass;
+    return bloom;
   });
 }
 
 async function setup(){
   createCanvas(windowWidth, windowHeight, WEBGL);
-  stars = buildGeometry(() => sphere(20, 3, 3))
+  stars = buildGeometry(() => sphere(30, 4, 2))
+  originalFrameBuffer = createFramebuffer();
+
   starShader = baseMaterialShader().modify(starShaderCallback); 
   starStrokeShader = baseStrokeShader().modify(starShaderCallback)
-  ditheringShader = baseFilterShader().modify(ditheringCallback);
-  originalFrameBuffer = createFramebuffer();
-  blurredFrameBuffer = createFramebuffer();
-  bloomShader = baseFilterShader().modify(bloom);
+  fresnelShader = baseColorShader().modify(fresnelShaderCallback);
+  bloomShader = baseFilterShader().modify(bloomShaderCallback);
+  pixellizeShader = baseFilterShader().modify(pixellizeShaderCallback);
 }
 
 function draw(){
   originalFrameBuffer.begin();
+  background(0);
   orbitControl();
-  background(0,0,0);
-  push();
-  stroke(255,0,255)
-  fill(255,200,255)
+
+  push()
+  strokeWeight(4)
+  stroke(255,0,0)
+  rotateX(PI/2 + millis() * 0.0005);
+  fill(255,100, 150)
   strokeShader(starStrokeShader)
   shader(starShader);
-  model(stars, 100);
-  pop();
+  model(stars, 2000);
+  pop()
+
+  push()
+  shader(fresnelShader)
+  noStroke()
+  sphere(500);
+  pop()
+  filter(pixellizeShader);
+
   originalFrameBuffer.end();
 
-  blurredFrameBuffer.begin();
-    image(originalFrameBuffer, -windowWidth/2, -windowHeight/2)
-    filter(BLUR)
-  blurredFrameBuffer.end();
-
-  // image(originalFrameBuffer, -windowWidth/2, -windowHeight/2)
+  imageMode(CENTER)
+  image(originalFrameBuffer, 0, 0)
+  
+  filter(BLUR, 20)
   filter(bloomShader);
 }

src/shape/vertex.js

@@ -1413,7 +1413,7 @@ function vertex(p5, fn){
   /**
    * Sets the shader's vertex property or attribute variables.
    *
-   * An vertex property or vertex attribute is a variable belonging to a vertex in a shader. p5.js provides some
+   * A vertex property, or vertex attribute, is a variable belonging to a vertex in a shader. p5.js provides some
    * default properties, such as `aPosition`, `aNormal`, `aVertexColor`, etc. These are
    * set using <a href="#/p5/vertex">vertex()</a>, <a href="#/p5/normal">normal()</a>
    * and <a href="#/p5/fill">fill()</a> respectively. Custom properties can also