OutlinePass - "this.getPrepareMaskMaterial is not a function" error?

Questions
,
#1

I’m implementing OutlinePass in my project, and have followed exactly as in the example. Yet I received this error said “this.getPrepareMaskMaterial is not a function”. I don’t know what is wrong with or missing in my code. Could you take a look and see what’s wrong with it? Thanks a lot.

Full error message:

Uncaught TypeError: this.getPrepareMaskMaterial is not a function
at new THREE.OutlinePass (OutlinePass.js:45)
at init (script.js:88)
at script.js:218

Here is the code (outline related part only):

var OUTLINE;
var COMPOSER;
var FXAA;
// scene, camera, renderer were all defined
// FXAAShader, CopyShader, ShaderPass, OutlinePass, EffectComposer .js files were all imported

function init() {
    COMPOSER = new THREE.EffectComposer(renderer);

    var renderPass = new THREE.RenderPass(scene, camera);
    COMPOSER.addPass(renderPass);

    FXAA = new THREE.ShaderPass(THREE.FXAAShader);
    FXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
    FXAA.renderToScreen = true;
    COMPOSER.addPass(FXAA);

    // the error emits from this below line
    OUTLINE = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    OUTLINE.edgeStrength = 6;
    OUTLINE.edgeGlow = 1;
    OUTLINE.edgeThickness = 4;
    OUTLINE.pulsePeriod = 2;
    OUTLINE.visibleEdgeColor = 0xffff00;
    OUTLINE.hiddenEdgeColor = 0xffffff;
    COMPOSER.addPass(OUTLINE);
}

function animate() {
    requestAnimationFrame(animate);
    COMPOSER.render();
}

Here is the full code

#2

Your shared fiddle is full of errors and does not run. Please ensure you live demo actually works.

In any event, the order of you pass chain is not correct. Your init function should look like this:

function init() {
    COMPOSER = new THREE.EffectComposer(renderer);

    var renderPass = new THREE.RenderPass(scene, camera);
    COMPOSER.addPass(renderPass);

    // the error emits from this below line
    OUTLINE = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
    OUTLINE.edgeStrength = 6;
    OUTLINE.edgeGlow = 1;
    OUTLINE.edgeThickness = 4;
    OUTLINE.pulsePeriod = 2;
    OUTLINE.visibleEdgeColor = 0xffff00;
    OUTLINE.hiddenEdgeColor = 0xffffff;
    COMPOSER.addPass(OUTLINE);

    FXAA = new THREE.ShaderPass(THREE.FXAAShader);
    FXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
    FXAA.renderToScreen = true;
    COMPOSER.addPass(FXAA);
}
1 Like
#3

I’ve changed the order of the passes as you said, but the error still persists

#4

Sry, without providing a live example it’s not possible for me to help you further. I can’t find an obvious problem with your code so debugging might help.

1 Like
#5

Can you find what’s wrong with my outline pass implementation in the fiddle, except the order of the passes? When I run the code in my fiddle above, the scene was completely black, and the console show “not a function” error as in the question. I tried using the code from the OutlinePass example and inserted my pointer lock controls (which is the same control in the fiddle), and every objects in the scene was rendered perfectly, but my pointer lock control was not functional at all, and the console showed no error.

#6

Sorry for the late reply, I just had the same problem today.
It turned out that I was loading OutlinePass.js before EffectComposer.js.
OutlinePass extends Pass, which is created inside EffectComposer.
I solved it by loading OutlinePass (and any other *Pass.js file) after EffectComposer.js.

<script src="libs/threejs/effectcomposer.js"></script>
<script src="libs/threejs/shaderpass.js"></script>
<script src="libs/threejs/outlinepass.js"></script>