Skip to content

Commit

Permalink
prepping for 1.7
Browse files Browse the repository at this point in the history
  • Loading branch information
N8 committed Nov 19, 2023
1 parent 99b3f5e commit d3e9c4a
Show file tree
Hide file tree
Showing 16 changed files with 1,578 additions and 535 deletions.
481 changes: 352 additions & 129 deletions dist/N8AO.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/N8AO.js.map
View file

Large diffs are not rendered by default.

481 changes: 352 additions & 129 deletions example/N8AO.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/N8AO.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<body>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{ "imports": { "three": "https://unpkg.com/three@0.152.0/build/three.module.js", "three/examples/": "https://unpkg.com/three@0.152.0/examples/", "three/addons/": "https://unpkg.com/three@0.152.0/examples/jsm/", "postprocessing": "https://unpkg.com/postprocessing@6.31.0/build/postprocessing.esm.js"}
{ "imports": { "three": "https://unpkg.com/three@0.158.0/build/three.module.js", "three/examples/": "https://unpkg.com/three@0.158.0/examples/", "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/", "postprocessing": "https://unpkg.com/postprocessing@6.33.0/build/index.js"}
}
</script>
<p style="position:absolute;top:100%;transform:translate(4px, -200%);color:white;z-index:100000;background-color: black;">Elapsed Time for AO (<span id="aoMetadata"></span>): <span id="aoTime">0</span>ms </p>
Expand Down
74 changes: 69 additions & 5 deletions example/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { ShadowMesh } from 'three/addons/objects/ShadowMesh.js';
import { Stats } from "./stats.js";
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { N8AOPass } from './N8AO.js';
Expand All @@ -14,7 +15,9 @@ async function main() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, clientWidth / clientHeight, 0.1, 1000);
camera.position.set(50, 75, 50);
const renderer = new THREE.WebGLRenderer();
const renderer = new THREE.WebGLRenderer({
stencil: true
});
renderer.setSize(clientWidth, clientHeight);
document.body.appendChild(renderer.domElement);
renderer.shadowMap.enabled = true;
Expand All @@ -36,13 +39,46 @@ async function main() {
]);
environment.colorSpace = THREE.SRGBColorSpace;
scene.background = environment;
const torusKnot = new THREE.Mesh(new THREE.TorusKnotGeometry(5, 1.5, 200, 32), new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, envMap: environment, metalness: 0.5, roughness: 0.5, color: new THREE.Color(0.0, 1.0, 0.0) }));
const torusKnot = new THREE.Mesh(new THREE.TorusKnotGeometry(5, 1.5, 200, 32), new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, envMap: environment, color: new THREE.Color(0.0, 1.0, 0.0) }));
torusKnot.position.y = 8.5;
torusKnot.position.x = 0;
torusKnot.position.z = 0;
torusKnot.castShadow = true;
torusKnot.receiveShadow = true;
scene.add(torusKnot);
const torusKnot2 = new THREE.Mesh(new THREE.TorusKnotGeometry(5, 1.5, 200, 32), new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, envMap: environment, color: new THREE.Color(1.0, 0.0, 0.0), transparent: true, depthWrite: true }));
torusKnot2.position.y = 8.5;
torusKnot2.position.x = -20;
torusKnot2.position.z = 0;
torusKnot2.castShadow = true;
torusKnot2.receiveShadow = true;
scene.add(torusKnot2);
const torusKnot3 = new THREE.Mesh(new THREE.TorusKnotGeometry(5, 1.5, 200, 32), new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, envMap: environment, color: new THREE.Color(0.0, 0.0, 1.0), transparent: true, depthWrite: false }));
torusKnot3.position.y = 8.5;
torusKnot3.position.x = 20;
torusKnot3.position.z = 0;
torusKnot3.castShadow = true;
torusKnot3.receiveShadow = true;
scene.add(torusKnot3);
const torusKnotShadow = new ShadowMesh(torusKnot);
scene.add(torusKnotShadow);
const torusKnotShadow2 = new ShadowMesh(torusKnot2);
torusKnotShadow2.material.color = new THREE.Color(1.0, 0.4, 0.4);
torusKnotShadow2.material.opacity = 1.0;
torusKnotShadow2.material.blending = THREE.MultiplyBlending;
scene.add(torusKnotShadow2);
const torusKnotShadow3 = new ShadowMesh(torusKnot3);
torusKnotShadow3.material.color = new THREE.Color(0.4, 0.4, 1.0);
torusKnotShadow3.material.opacity = 1.0;
torusKnotShadow3.material.blending = THREE.MultiplyBlending;
scene.add(torusKnotShadow3);
torusKnotShadow.userData.treatAsOpaque = true;
torusKnotShadow2.userData.treatAsOpaque = false;
torusKnotShadow3.userData.treatAsOpaque = false;
const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.1);
const lightPos4d = new THREE.Vector4(50, 100, 50, 0);


const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/");
Expand All @@ -52,8 +88,8 @@ async function main() {
if (object.material) {
object.material.envMap = environment;
}
})
sponza.scale.set(10, 10, 10)
});
sponza.scale.set(10, 10, 10);
scene.add(sponza);
const effectController = {
aoSamples: 16.0,
Expand All @@ -64,10 +100,12 @@ async function main() {
screenSpaceRadius: false,
halfRes: false,
depthAwareUpsampling: true,
transparencyAware: true,
intensity: 5.0,
renderMode: "Combined",
color: [0, 0, 0],
colorMultiply: true
colorMultiply: true,
stencil: true
};
const gui = new GUI();
gui.add(effectController, "aoSamples", 1.0, 64.0, 1.0);
Expand Down Expand Up @@ -95,7 +133,9 @@ async function main() {
df.updateDisplay();
});
gui.add(effectController, "halfRes");
gui.add(effectController, "transparencyAware");
gui.add(effectController, "depthAwareUpsampling");
gui.add(effectController, "stencil");
gui.add(effectController, "intensity", 0.0, 10.0, 0.01);
gui.addColor(effectController, "color");
gui.add(effectController, "colorMultiply");
Expand Down Expand Up @@ -127,12 +167,36 @@ async function main() {
aoMeta.innerHTML = `${clientWidth}x${clientHeight}`
torusKnot.rotation.x += 0.033;
torusKnot.rotation.y += 0.033;
torusKnot2.rotation.x += 0.033;
torusKnot2.rotation.y += 0.033;
torusKnot3.rotation.x += 0.033;
torusKnot3.rotation.y += 0.033;
torusKnot2.material.opacity = Math.sin(performance.now() * 0.001) * 0.5 + 0.5;
torusKnot3.material.opacity = Math.cos(performance.now() * 0.001) * 0.5 + 0.5;
torusKnotShadow2.material.color.g = 1 - 0.6 * torusKnot2.material.opacity;
torusKnotShadow2.material.color.b = 1 - 0.6 * torusKnot2.material.opacity;
torusKnotShadow3.material.color.r = 1 - 0.6 * torusKnot3.material.opacity;
torusKnotShadow3.material.color.g = 1 - 0.6 * torusKnot3.material.opacity;
torusKnotShadow.update(
groundPlane,
lightPos4d
);
torusKnotShadow2.update(
groundPlane,
lightPos4d
);
torusKnotShadow3.update(
groundPlane,
lightPos4d
);
n8aopass.configuration.aoRadius = effectController.aoRadius;
n8aopass.configuration.distanceFalloff = effectController.distanceFalloff;
n8aopass.configuration.transparencyAware = effectController.transparencyAware;
n8aopass.configuration.intensity = effectController.intensity;
n8aopass.configuration.aoSamples = effectController.aoSamples;
n8aopass.configuration.denoiseRadius = effectController.denoiseRadius;
n8aopass.configuration.denoiseSamples = effectController.denoiseSamples;
n8aopass.configuration.stencil = effectController.stencil;
n8aopass.configuration.renderMode = ["Combined", "AO", "No AO", "Split", "Split AO"].indexOf(effectController.renderMode);
n8aopass.configuration.color = new THREE.Color(effectController.color[0], effectController.color[1], effectController.color[2]);
n8aopass.configuration.screenSpaceRadius = effectController.screenSpaceRadius;
Expand Down
Loading

0 comments on commit d3e9c4a

Please sign in to comment.