Hi! I’m new to Three.js and followed this tutorial (three.js docs) to add a glitch post-processing to my scene, which was imported from blender. But when I use composer.render(); to instead of the normal renderer.render(scene, camera); I get some artifacts on my model as you can see in the image below.
Using renderer.render(scene, camera);
Using composer.render();
As you can see, the area around the eye looks jagged when using composer’s render function. When viewing from a different camera angle, some other part looks jagged. Is there some way to fix this or reduce it?
P.S. The camera and lighting being used here is part of blender scene and not a Three.js one.
Here’s the code that I’m using:
// let THREE = require("three");
import * as THREE from "three";
import {PointLight} from "three";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js";
import {EffectComposer} from "three/examples/jsm/postprocessing/EffectComposer.js";
import {RenderPass} from "three/examples/jsm/postprocessing/RenderPass.js";
import {GlitchPass} from "three/examples/jsm/postprocessing/GlitchPass.js";
// import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js";
console.log("Starting ThreeJS...")
// Scene & Camera
const scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
25,
window.innerWidth / window.innerHeight,
0.1,
20000
);
camera.position.set(1, 1, 20);
// Loader
const loader = new GLTFLoader();
// Renderer
const renderer = new THREE.WebGLRenderer();
// renderer.setClearColor(0xC5C5C3);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
document.body.appendChild(renderer.domElement);
// Post Processing
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
const glitchPass = new GlitchPass();
composer.addPass(renderPass);
composer.addPass(glitchPass);
// Load Light
let ambientLight = new THREE.AmbientLight(0xcccccc);
ambientLight.intensity = 1;
scene.add(ambientLight);
// Load the model
loader.load("/static/3d_models/monkey.glb", function (gltf) {
console.log(gltf.scene.children);
scene.add(gltf.scene);
// @ts-ignore
// Camera stuff
camera = gltf.cameras[0];
composer.removePass(renderPass);
composer.removePass(glitchPass);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new GlitchPass());
// Light stuff
let light: PointLight = <PointLight>gltf.scene.getObjectByName("Light_Orientation");
light.intensity = 120;
light.castShadow = true;
//Set up shadow properties for the light
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
// light.shadow.focus = 1; // default
// Mesh stuff
gltf.scene.traverse(object => {
if(object instanceof THREE.Mesh && object.name !== "Plane") {
object.castShadow = true;
console.log(`Shadow set for ${object.name}`);
}
if (object.name === "Plane") object.receiveShadow = true;
})
}, undefined, function (error) {
console.error(error);
});
// Frame Loop
function animate() {
requestAnimationFrame(animate);
// renderer.render(scene, camera);
composer.render();
}
animate();