MasatoMakino / threejs-shader-materials

Collection of shader materials for three.js
MIT License
304 stars 26 forks source link

Error when Using OuterGlowMaterial #11

Closed AndrewJSchoen closed 3 years ago

AndrewJSchoen commented 3 years ago

Thanks for this library! It is exactly what I was looking for. However, I am attempting to use the OuterGlowMaterial, but am receiving an error. The output to the console is as follows:

[Error] TypeError: Type error
    uniform3fv (vendors~main.iframe.bundle.js:168168)
    setValueV3f (vendors~main.iframe.bundle.js:168168)
    (anonymous function) (vendors~main.iframe.bundle.js:168889)
    setProgram (vendors~main.iframe.bundle.js:177423)
    (anonymous function) (vendors~main.iframe.bundle.js:176436)
    renderObject (vendors~main.iframe.bundle.js:177014)
    renderObjects (vendors~main.iframe.bundle.js:176987)
    (anonymous function) (vendors~main.iframe.bundle.js:176766)
    render$1 (vendors~main.iframe.bundle.js:5439)
    (anonymous function) (vendors~main.iframe.bundle.js:5458:116)
    forEach
    loop (vendors~main.iframe.bundle.js:5455)

I am generating the material in a simple function:

export const GlowMaterial = (r, g, b) => {
    var color = new Color();
    color.setRGB(r/255, g/255, b/255);
    const matGlow = new OuterGlowMaterial({
        fog: true
    });
    matGlow.color = color.getHex();
    matGlow.rimStrength = 0.0;
    matGlow.expansionStrength = 1.3;
    matGlow.insidePow = 2.0;
    matGlow.insideStrength = 2.0;
    matGlow.insideColor = new Color(0x00ffff);
    matGlow.depthWrite = false;
    matGlow.blending = AdditiveBlending;

    return matGlow
}

Let me know if there would be any other debugging information that would be helpful. Thanks!

three version: 0.128.0

MasatoMakino commented 3 years ago

Thank you for using this library!

Here was the problem.

matGlow.color = color.getHex();

OuterGlowMaterial.color takes a threejs Color type. But getHex() return Integer. Try setting a color as is, without converting it.