added 354

loops/354.js

@@ -0,0 +1,155 @@
+import THREE from '../third_party/three.js';
+import { renderer, getCamera } from '../modules/three.js';
+import Maf from '../modules/maf.js';
+import easings from '../modules/easings.js';
+import OrbitControls from '../third_party/THREE.OrbitControls.js';
+import { InstancedGeometry, getInstancedMeshStandardMaterial, getInstancedDepthMaterial } from '../modules/instanced.js';
+import RoundedBoxGeometry from '../third_party/three-rounded-box.js';
+import { Post } from './354/post.js';
+
+import { vs as boxVertexShader } from './354/box-vs.js';
+import { fs as boxFragmentShader } from './354/box-fs.js';
+
+const canvas = renderer.domElement;
+const camera = getCamera();
+const scene = new THREE.Scene();
+const group = new THREE.Group();
+const controls = new OrbitControls(camera, canvas);
+controls.screenSpacePanning = true
+
+camera.position.set(0, 0, 1);
+camera.lookAt(group.position);
+renderer.setClearColor(0, 1);
+
+// Codevember - Contrast
+
+const d = 20;
+
+const loader = new THREE.TextureLoader();
+
+const geometry = new RoundedBoxGeometry(.1, .1, .1, .01, 4);
+const material = new THREE.RawShaderMaterial({
+  uniforms: {
+    matCap: { value: loader.load('../assets/matcap3.jpg') },
+    d: { value: d }
+  },
+  vertexShader: boxVertexShader,
+  fragmentShader: boxFragmentShader,
+});
+const depthMaterial = getInstancedDepthMaterial();
+const instancedGeometry = new InstancedGeometry(geometry, { colors: true });
+const instancedMesh = new THREE.Mesh(instancedGeometry.geometry, material);
+instancedMesh.frustumCulled = false;
+instancedMesh.castShadow = true;
+instancedMesh.receiveShadow = true;
+instancedMesh.customDepthMaterial = depthMaterial;
+group.add(instancedMesh);
+
+const posValues = instancedGeometry.positions.values;
+const quatValues = instancedGeometry.quaternions.values;
+const scaleValues = instancedGeometry.scales.values;
+const colorValues = instancedGeometry.colors.values;
+
+const OBJECTS = 1000;
+
+const data = [];
+for (let i = 0; i < OBJECTS; i++) {
+  data[i] = {
+    zOffset: Maf.randomInRange(-d, d),
+    r: Maf.randomInRange(1, 3),
+    angle: Maf.randomInRange(0, Maf.TAU),
+    offsetRot: Maf.randomInRange(0, Maf.TAU),
+    scale: Maf.randomInRange(.1, 4),
+    rotation: Maf.randomInRange(0, Maf.TAU),
+    speed: 1, //Maf.randomInRange(.5, 2)
+    rotationSpeed: Maf.randomInRange(1, 3),
+    c: Math.round(Maf.randomInRange(0, 1)),
+    matrix: new THREE.Matrix4(),
+  }
+}
+
+const tmp = new THREE.Vector3(0, 0, 0);
+const up = new THREE.Vector3(0, 1, 0);
+const center = new THREE.Vector3();
+
+let ptr = 0;
+for (let j = 0; j < OBJECTS; j++) {
+  const x = Maf.randomInRange(-1, 1);
+  const y = Maf.randomInRange(-1, 1);
+  const z = Maf.randomInRange(-d, d);
+  posValues[ptr * 3] = x;
+  posValues[ptr * 3 + 1] = y;
+  posValues[ptr * 3 + 2] = z;
+  scaleValues[ptr * 3] = data[j].scale;
+  scaleValues[ptr * 3 + 1] = data[j].scale;
+  scaleValues[ptr * 3 + 2] = data[j].scale;
+  quatValues[ptr * 4] = 0;
+  quatValues[ptr * 4 + 1] = 0;
+  quatValues[ptr * 4 + 2] = 0;
+  quatValues[ptr * 4 + 3] = 1;
+  colorValues[ptr * 4] = data[j].c;
+  colorValues[ptr * 4 + 1] = data[j].c;
+  colorValues[ptr * 4 + 2] = data[j].c;
+  colorValues[ptr * 4 + 3] = 1;
+
+  tmp.set(x, y, z);
+  center.set(0, 0, z);
+  data[j].matrix.lookAt(tmp, center, up);
+
+  ptr++;
+}
+
+instancedGeometry.update(OBJECTS);
+
+group.scale.setScalar(1);
+
+scene.add(group);
+
+const loopDuration = 5;
+
+const mRot = new THREE.Matrix4();
+const q = new THREE.Quaternion();
+const m = new THREE.Matrix4();
+
+const post = new Post(renderer);
+
+function draw(startTime) {
+
+  const time = (.001 * (performance.now() - startTime)) % loopDuration;
+  const t = time / loopDuration;
+
+  let ptr = 0;
+  for (let j = 0; j < OBJECTS; j++) {
+    const a = data[j].angle + 0 * t * Maf.TAU * data[j].speed;
+    const x = data[j].r * Math.cos(a);
+    const y = data[j].r * Math.sin(a);
+    let z = data[j].zOffset + t * 2 * d;
+    if (z > d) z -= 2 * d;
+    posValues[ptr * 3] = x;
+    posValues[ptr * 3 + 1] = y;
+    posValues[ptr * 3 + 2] = z; // - 5;
+
+    m.copy(data[j].matrix);
+    mRot.makeRotationX(data[j].offsetRot);
+    m.multiply(mRot);
+    mRot.makeRotationY(t * Maf.TAU * data[j].rotationSpeed);
+    m.multiply(mRot);
+    mRot.makeRotationX(t * Maf.TAU);
+    m.multiply(mRot);
+    q.setFromRotationMatrix(m);
+
+    quatValues[ptr * 4 + 0] = q.x;
+    quatValues[ptr * 4 + 1] = q.y;
+    quatValues[ptr * 4 + 2] = q.z;
+    quatValues[ptr * 4 + 3] = q.w;
+
+    ptr++;
+  }
+
+  instancedGeometry.positions.update(OBJECTS);
+  instancedGeometry.quaternions.update(OBJECTS);
+
+  post.render(scene, camera);
+}
+
+export { draw, loopDuration, canvas, renderer, camera };

loops/354/blur-fs.js

@@ -0,0 +1,18 @@
+import { blur13 } from '../../shaders/fast-separable-gaussian-blur.js';
+
+const fs = `
+precision highp float;
+
+uniform vec2 resolution;
+uniform sampler2D inputTexture;
+uniform vec2 direction;
+
+varying vec2 vUv;
+
+${blur13}
+
+void main() {
+  gl_FragColor = blur13(inputTexture, vUv, resolution, direction);
+}`;
+
+export { fs };

loops/354/box-fs.js

@@ -0,0 +1,21 @@
+import screen from '../../shaders/screen.js';
+
+const fs =
+  `
+precision highp float;
+
+uniform sampler2D matCap;
+
+varying vec3 vColor;
+varying vec2 vN;
+varying float vDepth;
+
+${screen}
+
+void main(){
+  vec4 b = texture2D(matCap,vN);
+  vec3 c = vDepth*vColor+b.rgb*vDepth;
+  gl_FragColor = vec4(c,1.-b.r*vDepth);
+}`;
+
+export { fs };

loops/354/box-vs.js

@@ -0,0 +1,51 @@
+import { map1 } from '../../shaders/map.js';
+
+const vs =
+  `
+precision highp float;
+
+attribute vec3 position;
+attribute vec2 uv;
+attribute vec3 normal;
+
+attribute vec3 instancePosition;
+attribute vec4 instanceQuaternion;
+attribute vec3 instanceScale;
+attribute vec4 instanceColor;
+
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+uniform vec3 cameraPosition;
+uniform mat3 normalMatrix;
+
+uniform float d;
+
+varying vec3 vColor;
+varying vec2 vN;
+varying float vDepth;
+
+${map1}
+
+vec3 applyTRS( vec3 position, vec3 translation, vec4 quaternion, vec3 scale ) {
+  position *= scale;
+  position += 2.0 * cross( quaternion.xyz, cross( quaternion.xyz, position ) + quaternion.w * position );
+  return position + translation;
+}
+
+void main() {
+  vColor = instanceColor.rgb;
+  vec3 transformed = applyTRS(position, instancePosition, instanceQuaternion, instanceScale);
+  vDepth = map(transformed.z,-d,-.5*d,0.,1.);
+  vec3 transformedNormal = normalMatrix * applyTRS(normal, vec3(0.), instanceQuaternion, vec3(1.));
+  vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
+  gl_Position = projectionMatrix * mvPosition;
+
+  vec3 e = normalize( mvPosition.xyz);
+  vec3 n = normalize( normalMatrix * transformedNormal );
+  vec3 r = reflect( e, n );
+  float m = 2.82842712474619 * sqrt( r.z+1.0 );
+  vN = r.xy / m + .5;
+}
+`;
+
+export { vs };

loops/354/combine-fs.js

@@ -0,0 +1,32 @@
+import screen from '../../shaders/screen.js';
+
+const fs =
+  `
+precision highp float;
+
+uniform sampler2D colorTexture;
+uniform sampler2D blur1Texture;
+uniform sampler2D blur2Texture;
+uniform sampler2D blur3Texture;
+uniform sampler2D blur4Texture;
+uniform sampler2D blur5Texture;
+uniform sampler2D shadeTexture;
+
+varying vec2 vUv;
+
+${screen}
+
+void main() {
+  vec4 g = texture2D(colorTexture, vUv);
+
+  vec4 bloom = vec4(0.);
+  bloom += 1. * texture2D( blur1Texture, vUv );
+  bloom += 1. * texture2D( blur2Texture, vUv );
+  bloom += 1. * texture2D( blur3Texture, vUv );
+  bloom += 1. * texture2D( blur4Texture, vUv );
+  bloom += 1. * texture2D( blur5Texture, vUv );
+
+  gl_FragColor = screen(g+bloom,bloom,.1);
+}`;
+
+export { fs };

loops/354/final-color-fs.js

@@ -0,0 +1,23 @@
+import rgbShift from '../../shaders/rgb-shift.js';
+import screen from '../../shaders/screen.js';
+
+const fs =
+  `
+precision highp float;
+
+uniform vec2 resolution;
+
+uniform sampler2D inputTexture;
+
+varying vec2 vUv;
+${rgbShift}
+${screen}
+
+void main() {
+  vec4 color  = rgbShift(inputTexture, vUv, vec2(20.));
+  color = screen(color, color, 1.);
+  gl_FragColor = color;
+}
+`;
+
+export { fs };

loops/354/final-fs.js

@@ -0,0 +1,31 @@
+import vignette from '../../shaders/vignette.js';
+import fxaa from '../../shaders/fxaa.js';
+import softLight from '../../shaders/soft-light.js';
+import { gammaCorrect, levelRange, finalLevels } from '../../shaders/levels.js';
+
+const fs = `
+precision highp float;
+
+uniform vec2 resolution;
+
+uniform sampler2D inputTexture;
+uniform float vignetteBoost;
+uniform float vignetteReduction;
+
+varying vec2 vUv;
+${vignette}
+${fxaa}
+${softLight}
+${gammaCorrect}
+${levelRange}
+${finalLevels}
+
+void main() {
+  vec4 color = fxaa(inputTexture, vUv);
+  vec4 finalColor = softLight(color, vec4(vec3(vignette(vUv, vignetteBoost, vignetteReduction)),1.));
+  finalColor.rgb = finalLevels(finalColor.rgb, vec3(61.,23.,1.)/255., vec3(1.0), vec3(254.)/255.);
+  gl_FragColor = finalColor;
+}
+`;
+
+export { fs };

loops/354/highlight-fs.js

@@ -0,0 +1,20 @@
+import grayscale from '../../../shaders/grayscale.js';
+
+const fs =
+  `
+precision highp float;
+
+uniform sampler2D shadeTexture;
+uniform sampler2D colorTexture;
+
+varying vec2 vUv;
+
+${grayscale}
+
+void main() {
+  vec4 l = texture2D(colorTexture, vUv);
+  float a = 1.*clamp(l.a+.25,0.,1.);//smoothstep(l.a,.4,.6);
+  gl_FragColor.rgb = vec3(1.-a);//vec3(grayscale(gl_FragColor));
+}`;
+
+export { fs };