Merge pull request #10 from FarazzShaikh/dev

1.4.0
FarazzShaikh · Jul 18, 2021 · 9946924 · 9946924
2 parents ac71086 + f1bcbb6
commit 9946924
Show file tree

Hide file tree

Showing 31 changed files with 609 additions and 65 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -14,8 +14,6 @@ jobs:
         run: |
           npm install
           npm run build
-          chmod +x scripts/patchModule.sh
-          scripts/patchModule.sh
 
       - name: Test
         run: |

diff --git a/.github/workflows/sub.yml b/.github/workflows/sub.yml
@@ -11,8 +11,6 @@ jobs:
         run: |
           npm install
           npm run build
-          chmod +x scripts/patchModule.sh
-          scripts/patchModule.sh
           npm run test
 
       - name: Push build to branch

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Version 1.4.0
+
+### New
+
+- [Curl Noise](https://farazzshaikh.github.io/glNoise/examples/index.html?src=Curl/index.html)
+- Introduced dependency system
+  - This will allow for more complex, compound noise functions.
+
 ## Version 1.3.1
 
 ### Breaking

diff --git a/README.md b/README.md
@@ -272,6 +272,18 @@ float n = gln_normalize(p);
 
 The concept is pretty simple. You can fork it and write your GLSL functions in a file with the `.glsl` extension in the `src` directory. **The function must be shader independent so no use of `gl_FragCoord` or any shader-specific variables.** 
 
+Each new file must begin with the `name` directive like so:
+
+```
+// #name: <File Name without extension>
+```
+
+If your function requires functions from other files in this library, include the `deps` directive like so:
+```
+// #name: <File Name without extension>
+// #deps: <Dependancy Name 1> <Dependancy Name 2> ... <Dependancy Name n>
+```
+
 You can document your code using [JSDoc](https://jsdoc.app/about-getting-started.html) style comment blocks. The documentation is auto-generated so you **MUST** include a `@name` with the name of your function. See the preexisting functions for reference. This is because 
 
 Include your file in index.ts by importing it and exporting it like all the preexisting files. Make sure to include your new file in the `_all` array.
@@ -294,6 +306,7 @@ I have not come up with these noise functions. Here's attribution to the creator
 | Perlin Noise | Hugh Kennedy | [GitHub](https://github.com/hughsk/glsl-noise/blob/master/periodic/2d.glsl) | MIT |
 | Simplex Noise | Ian McEwan | [GitHub](https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl) | MIT |
 | Worley Noise | Max Bittker | [GitHub](https://github.com/MaxBittker/glsl-voronoi-noise) | MIT |
+| Curl Noise | Isaac Cohen | [GitHub](https://github.com/cabbibo/glsl-curl-noise) | ??? |
 
 Every other function is by yours truly.
 

diff --git a/build/glNoise.js b/build/glNoise.js
diff --git a/build/glNoise.m.js b/build/glNoise.m.js
diff --git a/build/glNoise.m.node.js b/build/glNoise.m.node.js
diff --git a/examples/Curl/index.html b/examples/Curl/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>gl-Noise • Curl</title>
+    <link href="../main.css" rel="stylesheet" />
+    <style>
+      body {
+        background-color: #3a4042;
+      }
+      .Info {
+        color: white;
+      }
+    </style>
+  </head>
+  <body type="0">
+    <div class="Info">Particles via Curl Noise.</div>
+    <script type="module" src="./main.js" defer></script>
+  </body>
+</html>
diff --git a/examples/Curl/main.js b/examples/Curl/main.js
@@ -0,0 +1,144 @@
+import * as THREE from "https://cdn.skypack.dev/three";
+import { OrbitControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls.js";
+
+import { CustomShaderMaterial, TYPES } from "../lib/three-csm.module.js";
+import { loadShadersCSM, Common, Simplex } from "../../build/glNoise.m.js";
+
+import waves from "./waves.js";
+
+function lights(scene) {
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5, 100);
+  const light = new THREE.HemisphereLight(0xffffff, 0xf7d9aa, 0.5);
+
+  scene.add(light);
+  scene.add(directionalLight);
+
+  directionalLight.position.set(0, 1, 0); //default; light shining from top
+  directionalLight.castShadow = true;
+
+  directionalLight.shadow.mapSize.width = 512; // default
+  directionalLight.shadow.mapSize.height = 512; // default
+  directionalLight.shadow.camera.near = 0.5; // default
+  directionalLight.shadow.camera.far = 500;
+}
+
+function map(x, in_min, in_max, out_min, out_max) {
+  return ((x - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
+}
+
+function rand(min, max) {
+  return map(Math.random(), 0, 1, min, max);
+}
+
+const v = {
+  defines: "./shaders/particle_defines.glsl",
+  header: "./shaders/particle_header.glsl",
+  main: "./shaders/particle_main.glsl",
+};
+
+const f = {
+  defines: "./shaders/frag/defines.glsl",
+  header: "./shaders/frag/header.glsl",
+  main: "./shaders/frag/main.glsl",
+};
+
+(async () => {
+  const { defines: vdefines, header: vheader, main: vmain } = await loadShadersCSM(v);
+  const { defines: fdefines, header: fheader, main: fmain } = await loadShadersCSM(f);
+  const renderer = new THREE.WebGLRenderer({ alpha: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+  document.body.appendChild(renderer.domElement);
+
+  const fov = 60;
+  const aspect = window.innerWidth / window.innerHeight;
+  const near = 0.1;
+  const far = 200;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+
+  const controls = new OrbitControls(camera, renderer.domElement);
+  camera.position.set(7, 7, 7);
+
+  const scene = new THREE.Scene();
+
+  lights(scene);
+
+  const loader = new THREE.TextureLoader();
+  const disk = loader.load("./textures/circle-sprite.png");
+
+  const geometry = new THREE.IcosahedronGeometry(4, 64);
+  console.log(geometry.attributes.position.count);
+  const material = new CustomShaderMaterial({
+    baseMaterial: TYPES.POINTS,
+    vShader: {
+      defines: vdefines,
+      header: vheader,
+      main: vmain,
+    },
+    fShader: {
+      defines: fdefines,
+      header: fheader,
+      main: fmain,
+    },
+    uniforms: {
+      uShift: {
+        value: 0,
+      },
+      uShape: {
+        value: disk,
+      },
+      uScale: {
+        value: window.innerHeight / 2,
+      },
+      uTime: {
+        value: 0,
+      },
+      uTargetPos: {
+        value: new THREE.Vector3(0),
+      },
+    },
+    passthrough: {
+      size: 0.05,
+    },
+  });
+
+  const points = new THREE.Points(geometry, material);
+
+  scene.add(points);
+
+  const targetPos = new THREE.Vector3();
+
+  renderer.domElement.addEventListener("pointermove", (event) => {
+    var vec = new THREE.Vector3(); // create once and reuse
+    var pos = new THREE.Vector3(); // create once and reuse
+
+    vec.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
+
+    vec.unproject(camera);
+
+    vec.sub(camera.position).normalize();
+
+    var distance = -camera.position.z / vec.z;
+
+    pos.copy(camera.position).add(vec.multiplyScalar(distance));
+    targetPos.x = pos.x;
+    targetPos.y = pos.y;
+    targetPos.z = pos.z;
+  });
+
+  const render = (time) => {
+    if (material && material.uniforms) {
+      material.uniforms.uTime.value = time * 0.001;
+      //   const p = new THREE.Vector3(targetPos).sub(material.uniforms.uTargetPos.value).multiplyScalar(0.05);
+      material.uniforms.uTargetPos.value = targetPos;
+    }
+
+    requestAnimationFrame(render);
+    renderer.render(scene, camera);
+    controls.update();
+  };
+
+  render();
+})();
diff --git a/examples/Curl/shaders/frag/defines.glsl b/examples/Curl/shaders/frag/defines.glsl
diff --git a/examples/Curl/shaders/frag/header.glsl b/examples/Curl/shaders/frag/header.glsl
@@ -0,0 +1,6 @@
+
+uniform float uShift;
+uniform sampler2D uShape;
+
+varying vec2 vUv;
+varying vec3 vPosition;
diff --git a/examples/Curl/shaders/frag/main.glsl b/examples/Curl/shaders/frag/main.glsl
@@ -0,0 +1,10 @@
+
+vec2 uv = vUv;
+uv.x += uShift;
+
+vec4 shapeData = texture2D(uShape, gl_PointCoord);
+if (shapeData.a < 0.0625)
+  discard;
+
+vec4 newColor = vec4(vPosition, 1.0);
+newColor = newColor * shapeData;
diff --git a/examples/Curl/shaders/particle_defines.glsl b/examples/Curl/shaders/particle_defines.glsl
diff --git a/examples/Curl/shaders/particle_header.glsl b/examples/Curl/shaders/particle_header.glsl
@@ -0,0 +1,6 @@
+uniform float uScale;
+uniform float uTime;
+uniform vec3 uTargetPos;
+
+varying vec2 vUv;
+varying vec3 vPosition;
diff --git a/examples/Curl/shaders/particle_main.glsl b/examples/Curl/shaders/particle_main.glsl
@@ -0,0 +1,21 @@
+
+
+vec3 p = position;
+// p += uTargetPos * 0.1;
+
+vec3 f = gln_curl((p * 0.2) + uTime * 0.05);
+
+vUv = uv;
+
+vec3 newPos = position + f;
+
+vec3 seg = newPos - uTargetPos;
+vec3 dir = normalize(seg);
+float dist = length(seg);
+if (dist < 3.) {
+  float force = clamp(1. / (dist * dist), 0., 1.);
+  newPos += dir * force;
+}
+
+vPosition = newPos;
+vec3 newNormal = normal;
diff --git a/examples/Curl/textures/circle-sprite.png b/examples/Curl/textures/circle-sprite.png
diff --git a/examples/Curl/waves.js b/examples/Curl/waves.js
@@ -0,0 +1,62 @@
+import * as THREE from "https://cdn.skypack.dev/three";
+import { Common } from "../../build/glNoise.m.js";
+import { CustomShaderMaterial, TYPES } from "../lib/three-csm.module.js";
+
+export default function waves(scene, mobile) {
+  let material;
+  material = new CustomShaderMaterial({
+    baseMaterial: TYPES.TOON,
+    vShader: {
+      defines: ` `,
+      header: `
+      varying vec3 vPosition;
+      `,
+      main: `
+      vec3 newPos = position;
+      vPosition = position;
+      vec3 newNormal = normal;
+      `,
+    },
+    fShader: {
+      defines: ` `,
+      header: `
+      ${Common}
+      varying vec3 vPosition;
+
+      vec4 calcColor() {
+
+        vec4 diffuseColor;
+
+        float mask;
+        mask = mix(0.0, 1.0, gln_map(vPosition.z, -5.0, 5.0, 0.0, 1.0));
+        mask = pow(mask, 8.0);
+
+        diffuseColor = vec4(1.,0.929,0.851,1.);
+
+        diffuseColor.rgb *= mask * 0.65;
+        diffuseColor.a *= mask;
+
+        return diffuseColor;
+      }
+
+      `,
+      main: `
+      vec4 newColor = calcColor();
+      `,
+    },
+    uniforms: {},
+    passthrough: {},
+  });
+
+  const geometry = new THREE.BoxGeometry(7, 7, 10, 1, 1, 1);
+  const plane = new THREE.Mesh(geometry, material);
+  plane.rotateX(-Math.PI / 2);
+  plane.position.y = -7;
+  plane.receiveShadow = true;
+
+  if (!mobile) scene.add(plane);
+
+  function displace(dt) {}
+
+  return displace;
+}
diff --git a/examples/Map/main.js b/examples/Map/main.js
@@ -1,6 +1,6 @@
 import { Renderer, Program, Color, Mesh, Triangle, Vec3 } from "https://cdn.skypack.dev/ogl";
 import * as dat from "../lib/dat.gui.module.js";
-import { loadShaders, Common } from "../../build/glNoise.m.js";
+import { loadShaders, Common, All } from "../../build/glNoise.m.js";
 
 const paths = ["./shader_f.glsl", "./shader_v.glsl"];
 
@@ -9,7 +9,9 @@ precision highp float;
 ${Common}
 `;
 
-loadShaders(paths, null, [head, head]).then(([fragment, vertex]) => {
+const chunks = [All, All];
+
+loadShaders(paths, chunks, [head, head]).then(([fragment, vertex]) => {
   const renderer = new Renderer();
   const gl = renderer.gl;
   document.body.appendChild(gl.canvas);

diff --git a/examples/index.html b/examples/index.html
@@ -36,6 +36,7 @@
       <a class="Example" sec="misc" selected="true" type="0" href="./Planet/3D.html">Planet</a>
       <a class="Example" sec="misc" selected="false" type="0" href="./3D/3D.html">Cube</a>
       <a class="Example" sec="misc" selected="false" type="0" href="./Waves/3D.html">Waves</a>
+      <a class="Example" sec="misc" selected="false" type="0" href="./Curl/index.html">Curl</a>
 
       <div class="Section">Misc</div>
       <a class="Example" sec="misc" selected="false" type="0" href="./BlendModes/blend.html">Blend Modes</a>