1
$\begingroup$

Trying to replicate ThreeJS outline postprocessing example, but I'm facing an error on some uncompiled Vertex shader.

I actually just copy/pasted source code with some small adjustment (removed the on-mouse-over detection in favor of an easier checkbox).

For the sake of completeness, I'm using Webpack and LaravelMix as boundlers for the test and threejs 0.144.0.

My code

import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';


let renderer, scene, camera, controls;

let composer, outlinePass, effectFXAA;

let cube;

const gui = new GUI({ width: 280 });
const guiParams = {
    edgeStrength: 3.0,
    edgeGlow: 0.0,
    edgeThickness: 1.0,
    pulsePeriod: 0,
    rotate: false,
    usePatternTexture: false,
    outline: false,
};

gui.add(guiParams, 'outline').onChange(function (value) {
    outlinePass.selectedObjects = value ? [cube] : [];
});


init();
animate();

function init() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    window.addEventListener('resize', onWindowResize);

    // RENDERER
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    // SCENE
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);

    // CAMERA
    camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
    camera.position.set(2, 2, 8);
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    // CONTROLS
    controls = new OrbitControls(camera, renderer.domElement);

    // DIRECTIONAL LIGHT
    const light = new THREE.PointLight(0xddffdd, 0.6);
    light.position.set(1, 2, 3);
    scene.add(light);

    // AMBIENT LIGHT
    scene.add(new THREE.AmbientLight(0xaaaaaa, 0.1));

    // BOX
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshPhysicalMaterial({ color: 0x00ff00 });
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);



    // ===============
    // POST PROCESSING
    // ===============

    // COMPOSER
    composer = new EffectComposer(renderer);

    const renderPass = new RenderPass(scene, camera);
    composer.addPass(renderPass);

    outlinePass = new OutlinePass(new THREE.Vector2(width, height), scene, camera);
    composer.addPass(outlinePass);

    effectFXAA = new ShaderPass(FXAAShader);
    effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
    effectFXAA.renderToScreen = true;
    composer.addPass(effectFXAA);
};

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    composer.render();
};



function onWindowResize() {

    const width = window.innerWidth;
    const height = window.innerHeight;

    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    renderer.setSize(width, height);
    composer.setSize(width, height);

    effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);

}

The error

enter image description here

UPDATE #1

I got the same error running the snippet of this SO answer so I'm wondering if the problem is relate to my specific pc, is it possible?

Do I have to worry about users hardware when writing my threejs code? enter image description here

$\endgroup$
2
  • $\begingroup$ The problem is, that within your vertex shader the variable "worldPosition" is undeclared, like the error massage says. I think no one here can help you without having the source code of your shader(vertex shader) $\endgroup$
    – Thomas
    Sep 23, 2022 at 11:13
  • $\begingroup$ @Thomas that's all my code, I'm not using any custom vertex shared. As I said, I just copy pasted the official example. $\endgroup$
    – fudo
    Sep 23, 2022 at 12:31

1 Answer 1

0
$\begingroup$

I had the same issue in version 0.140.0. Couldn't find any solutions, so I installed the latest Three.js version at the time (0.151.3). It solved the problem, now working as intended. Maybe it has something to do with the inner workings of the OutlinePass.

If you're already using the latest version and the problem persists, maybe going back to an older version might solve the problem.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.