<p>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.</p>
<p>If you're already using the latest version and the problem persists, maybe going back to an older version might solve the problem.</p>

CC BY-SA 4.0
2023-04-26T12:48:33.343Z
2023-04-26T12:48:33.343Z
Vahaidak
<p>Trying to replicate ThreeJS outline postprocessing <a href="https://threejs.org/examples/#webgl_postprocessing_outline" rel="nofollow noreferrer">example</a>, but I'm facing an error on some uncompiled Vertex shader.</p>
<p>I actually just copy/pasted source code with some small adjustment (removed the on-mouse-over detection in favor of an easier checkbox).</p>
<p>For the sake of completeness, I'm using Webpack and LaravelMix as boundlers for the test and threejs 0.144.0.</p>
<h2>My code</h2>
<pre class="lang-js prettyprint-override"><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);

}
</code></pre>
<h2>The error</h2>
<p><a href="https://i.sstatic.net/Ar1Tu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Ar1Tu.png" alt="enter image description here" /></a></p>
<h1>UPDATE #1</h1>
<p>I got the same error running the snippet of <a href="https://stackoverflow.com/q/71990398">this SO answer</a> so I'm wondering if the problem is relate to my specific pc, is it possible?</p>
<p>Do I have to worry about users hardware when writing my threejs code?
<a href="https://i.sstatic.net/EsVfu.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/EsVfu.png" alt="enter image description here" /></a></p>

CC BY-SA 4.0
2022-09-23T11:13:55.947Z
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)
Thomas
CC BY-SA 4.0
2022-09-23T12:31:12.860Z
@Thomas that's all my code, I'm not using any custom vertex shared. As I said, I just copy pasted the official example.
fudo
<post-processing><three.js><compositing>
ThreeJS OutlinePass error on Vertex shader not compiled
fudo
# ThreeJS OutlinePass error on Vertex shader not compiled

(Asked by: username_0 on 2022-09-23)

Trying to replicate ThreeJS outline postprocessing [example](https://threejs.org/examples/#webgl_postprocessing_outline), 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

```js
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](https://i.sstatic.net/Ar1Tu.png)](https://i.sstatic.net/Ar1Tu.png)

# UPDATE #1

I got the same error running the snippet of [this SO answer](https://stackoverflow.com/q/71990398) 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](https://i.sstatic.net/EsVfu.png)](https://i.sstatic.net/EsVfu.png)

**Tags:** post-processing, three.js, compositing

> **Comments:**
> **username_1**: 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)  
> **username_0**: @username_1 that's all my code, I'm not using any custom vertex shared. As I said, I just copy pasted the official example.  

---

## 1 answers

### Answer by username_2 on 2023-04-26. Score: 0

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.


---

