Background svg image

Questions
1

Hi!
I’m trying to add a background static image .svg to my scene.
I have loaded a new texture and setted as background property of the main scene.
I can see my svg rendered in background but it appear with a poor definition and grainy.
Here my code:

const texture = new THREE.TextureLoader().load("/img/background.svg");
this.scene.background = texture;

What’s the correct way to do this?

Thank you

2

WebGL can’t render vector graphics in the same optimal way like when using SVGs directly in a website. You might want to convert the SVG to PNG or JPEG and then use it as the scene’s background. This might give you more control over the final image quality.

3

Ok, working with SVGLoader and SVGObject could be a solution?
Thank you for your quick reply.

4

No, SVGLoader does not return an image hence you can’t apply it to Scene.background. SVGObject is from SVGRenderer which is not relevant when using Scene.background.

5

If you wan’t it just as a background - wouldn’t using an underlying <img /> solve the problem? :thinking: (With renderer canvas transparency enabled.)

6

Ok, thank you!

I have made some changes in the logic
I have exported every svg group as a separated png and imported in my scene loading every file as a texture, I have created a plain geometry and finally I have created the meshes. (I will animate them)

So, at now in my code there is 3 different effect Composer:

  • one for bloom effect
  • one for rendering the background scene
  • one for composing all with a ShaderPass

There is also 2 different scenes, one for the bg and one for the other mesh.

All works fine except that when I meshing my textures creating the shaderMaterial, the background texture blend with the other textures (like if all textures have the alpha channel at 50%).

In particular I need to blend bloomTexture and baseTexture but not the bgTexture (do I need to make 2 separate ShaderPass?).

Following my code:

setupFinalPass () {

      const finalPass = new ShaderPass(
        new THREE.ShaderMaterial({ 
          uniforms: {
            bgTexture: { value: this.bgComposer.renderTarget2.texture },
            baseTexture: { value: null },
            bloomTexture: { value: this.bloomComposer.renderTarget2.texture },
          },
          vertexShader: finalVertexshader,
          fragmentShader: finalFragmentshader,
          blending: THREE.NoBlending,
          defines: {},
        }),
        "baseTexture"
      );

      finalPass.needsSwap = true;

      this.composer.addPass(finalPass);
},

const finalVertexshader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const finalFragmentshader = `
  uniform sampler2D bgTexture;
  uniform sampler2D baseTexture;
  uniform sampler2D bloomTexture;
  varying vec2 vUv;
  vec4 getTexture( sampler2D texelToLinearTexture ) {
    vec4 text = mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
    return text;
  }
  void main() {
    vec4 monkeyTexture = getTexture( baseTexture ) + vec4( 1.0 ) * getTexture( bloomTexture );
    vec4 bgTexture = texture2D( bgTexture, vUv );
    gl_FragColor = bgTexture * 1.0 + monkeyTexture * 1.0;
  }
`;

Where I’m wrong?
Thank you