[src/demos/kusama-sphere-advanced.js] 2019.10.27-12.27.43

README.md

@@ -36,7 +36,11 @@ This repo contains the source code for my Frontend Masters *Advanced Creative Co
 
   - `canvas-sketch-cli@1.11.4` or higher (see [here](./guides/canvas-sketch.md) on how to install)
 
-- ️️️⚡️ Some Suggested npm Modules
+- ⚡ Code Snippets
+
+  - [Snippets used in the Workshop](./guides/snippets.md)
+
+- ️️️📦️ Some Suggested npm Modules
 
   - [Modules for Creative Coding](./guides/modules.md)
 

guides/snippets.md

@@ -0,0 +1,81 @@
+#### <sup>:closed_book: [workshop-webgl-glsl](../README.md) → Code Snippets</sup>
+
+---
+
+# Code Snippets
+
+A few snippets that we may use during the workshop.
+
+## GLSL — Rim Light Shader
+
+Here's how we can create rim lighting on a sphere geometry. This goes in the Fragment shader, and expects `vPosition` which is a varying of the position attribute:
+
+```glsl
+uniform mat4 modelMatrix;
+
+float sphereRim (vec3 spherePosition) {
+  vec3 normal = normalize(spherePosition.xyz);
+  vec3 worldNormal = normalize(mat3(modelMatrix) * normal.xyz);
+  vec3 worldPosition = (modelMatrix * vec4(spherePosition, 1.0)).xyz;
+  vec3 V = normalize(cameraPosition - worldPosition);
+  float rim = 1.0 - max(dot(V, worldNormal), 0.0);
+  return pow(smoothstep(0.0, 1.0, rim), 0.5);
+}
+```
+
+In your rendering:
+
+```glsl
+void main () {
+  ...
+
+  // a value between 0..1
+  float rim = sphereRim(vPosition);
+
+  ...
+}
+```
+
+## GLSL — Anti-aliased Step Function
+
+First, make sure your shader has standard derivatives extension enabled:
+
+```js
+const material = new THREE.ShaderMaterial({
+  ...
+  extensions: {
+    derivatives: true
+  },
+  ...
+})
+```
+
+Then, install `glsl-aastep` and include the following:
+
+```glsl
+#pragma glslify: aastep = require('glsl-aastep')
+
+void main () {
+  ...
+
+  // Some distance value, e.g. distance from point
+  float distance = /* some value */;
+
+  // Some threshold, e.g. size of circle you want to step to
+  float threshold = 0.25;
+
+  // Perform an anti-alias step, returns a value between 0..1
+  float edge = aastep(threshold, distance);
+  ...
+}
+```
+
+This is basically the following step function, but the edge is smoothed perfectly with anti-aliasing rather than a jagged/stepped edge:
+
+```
+threshold < distance ? 0.0 : 1.0
+```
+
+## 
+
+#### <sup>[← Back to README](../README.md)

src/demos/kusama-sphere-aastep.js → src/demos/kusama-sphere-advanced.js

@@ -26,8 +26,8 @@ const sketch = ({ context }) => {
     canvas: context.canvas
   });
 
-  const palette = Random.shuffle(risoColors).slice(0, 10);
-  const backgroundHex = Random.pick(paperColors);
+  const palette = Random.shuffle(risoColors).slice(0, 4);
+  const backgroundHex = "hsl(0, 0%, 20%)"; //Random.pick(paperColors);
   const background = new THREE.Color(backgroundHex);
 
   // WebGL background color
@@ -49,7 +49,11 @@ const sketch = ({ context }) => {
   const baseGeometry = new THREE.IcosahedronGeometry(1, 1);
 
   // List of points we will pass to the shader
-  const points = baseGeometry.vertices;
+  const points = baseGeometry.vertices.map(p => {
+    const { x, y, z } = p;
+    const size = Random.range(0, 2);
+    return new THREE.Vector4(x, y, z, size);
+  });
 
   const spheres = packSpheres({
     maxCount: 10,
@@ -72,7 +76,7 @@ const sketch = ({ context }) => {
       uniforms: {
         background: { value: new THREE.Color(background) },
         color: { value: new THREE.Color(color0) },
-        pointColor: { value: new THREE.Color(color1) },
+        pointColor: { value: new THREE.Color("black") },
         points: { value: points }
       },
       vertexShader: /*glsl*/ `
@@ -87,7 +91,7 @@ const sketch = ({ context }) => {
       uniform vec3 color;
       uniform vec3 pointColor;
       uniform vec3 background;
-      uniform vec3 points[POINT_COUNT];
+      uniform vec4 points[POINT_COUNT];
 
       #pragma glslify: aastep = require('glsl-aastep');
 
@@ -105,22 +109,26 @@ const sketch = ({ context }) => {
 
       void main () {
         float dist = 1000.0;
+        float size = 1.0;
         for (int i = 0; i < POINT_COUNT; i++) {
-          vec3 point = points[i];
-          float curDist = distance(vPosition, point);
-          dist = min(curDist, dist);
+          vec4 point = points[i];
+          float curDist = distance(vPosition, point.xyz);
+          if (curDist < dist) {
+            dist = curDist;
+            size = point.w;
+          }
         }
 
-        float inside = 1.0 - aastep(0.1, dist);
+        float inside = 1.0 - aastep(0.1 * size, dist);
         
-        vec3 fragColor = mix(color, pointColor, inside);
+        vec3 fragColor = mix(pointColor, color, inside);
 
         float rim = sphereRim(vPosition);
 
-        fragColor += rim * color * 0.25;
+        fragColor += (1.0 - rim) * color * 0.25;
 
-        float stroke = aastep(0.9, rim);
-        fragColor = mix(fragColor, background, stroke);
+        float stroke = aastep(0.925, rim);
+        fragColor = mix(fragColor, color, stroke);
 
         gl_FragColor = vec4(fragColor, 1.0);
       }