Using shaders to adjust the background color of a scene in three.js: A step-by-step guide

Question

Using shaders to adjust the background color of a scene in three.js: A step-by-step guide

Is there a way to modify the background color of a basic three.js scene using shaders or ShaderMaterial? I have tried inputting glsl code within the brackets of renderer.setClearColor(/*insert color here*/) or scene.background = new THREE.Color(/*insert color here*/), but it does not seem to be effective. How can I achieve this?

javascript graphics three.js shader fragment-shader

Answer 1

Answer №1

Implementing WebGLRenderTarget.texture as the scene.background:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  gu.resolution.set(innerWidth, innerHeight);
});

const gu = {
  time: {value: 0},
  resolution: {value: new THREE.Vector2(innerWidth, innerHeight)}
}

const light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.2));

const ico = new THREE.Mesh(new THREE.IcosahedronGeometry(3, 0), new THREE.MeshLambertMaterial({color: 0xff4488}));
scene.add(ico);

// <background stuff>
const backScene = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({
  color: 0x004488,
  onBeforeCompile: shader =>  {
  shader.uniforms.time = gu.time;
  shader.uniforms.resolution = gu.resolution;
  shader.vertexShader = `
    varying vec2 vUv;
  ` + shader.vertexShader;
  shader.vertexShader = shader.vertexShader.replace(
    `#include <uv_vertex>`,
    `vUv = uv;`
  );
  shader.fragmentShader = `
    ${noise}
    uniform float time;
    uniform vec2 resolution;
    varying vec2 vUv;
  ` + shader.fragmentShader;
  shader.fragmentShader = shader.fragmentShader.replace(
    `vec4 diffuseColor = vec4( diffuse, opacity );`,
    `
      vec2 tUv = vUv * 5.0;
      tUv.x *= resolution.x / resolution.y;
      float t = time * 0.5;
      tUv -= vec2(t * 0.25, t);
      float n1 = snoise(vec3(tUv, time * 0.125));
      n1 = (n1 + 1.0) * 0.5;
      
      float n2 = snoise(vec3(n1 * 10., 1, 1));
      n2 = sin(((n2 + 1.0) * 0.5) * 3.1415926 * 2.);
      
      float effect = smoothstep(0.1, 0.125, n1) * (1. - smoothstep(0.375, 0.4, n2));
      float coef = sin(n2 * 3.141526 * 0.5) * 0.125;
      float e = effect - abs(coef);
      e = n1 > 0.25 && n1 < 0.75? e * e : pow(e, 16.);

      vec4 diffuseColor = vec4(diffuse * e, opacity);
    `
  );
}
}));
const backCamera = new THREE.Camera();
const backRT = new THREE.WebGLRenderTarget(innerWidth, innerHeight);
scene.background = backRT.texture; // setting it to background
// </background stuff>

const clock = new THREE.Clock();

renderer.setAnimationLoop( _ => {
  const t = clock.getElapsedTime();
  gu.time.value = t;
  
  ico.rotation.x = t * 0.31;
  ico.rotation.y = t * 0.27;
  
  renderer.setRenderTarget(backRT); // assigning render target
  renderer.render(backScene, backCamera); // rendering the background
  
  renderer.setRenderTarget(null); // removing render target, now rendering to default buffer
  renderer.render(scene, camera); // rendering the scene again
  
  renderer.render(scene, camera);
})

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  var noise = `
  //
/*

Truncated for brevity...
*/ 

`;
</script>

Answer 2

Implementing WebGLRenderTarget.texture as the scene.background:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  gu.resolution.set(innerWidth, innerHeight);
});

const gu = {
  time: {value: 0},
  resolution: {value: new THREE.Vector2(innerWidth, innerHeight)}
}

const light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.2));

const ico = new THREE.Mesh(new THREE.IcosahedronGeometry(3, 0), new THREE.MeshLambertMaterial({color: 0xff4488}));
scene.add(ico);

// <background stuff>
const backScene = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial({
  color: 0x004488,
  onBeforeCompile: shader =>  {
  shader.uniforms.time = gu.time;
  shader.uniforms.resolution = gu.resolution;
  shader.vertexShader = `
    varying vec2 vUv;
  ` + shader.vertexShader;
  shader.vertexShader = shader.vertexShader.replace(
    `#include <uv_vertex>`,
    `vUv = uv;`
  );
  shader.fragmentShader = `
    ${noise}
    uniform float time;
    uniform vec2 resolution;
    varying vec2 vUv;
  ` + shader.fragmentShader;
  shader.fragmentShader = shader.fragmentShader.replace(
    `vec4 diffuseColor = vec4( diffuse, opacity );`,
    `
      vec2 tUv = vUv * 5.0;
      tUv.x *= resolution.x / resolution.y;
      float t = time * 0.5;
      tUv -= vec2(t * 0.25, t);
      float n1 = snoise(vec3(tUv, time * 0.125));
      n1 = (n1 + 1.0) * 0.5;
      
      float n2 = snoise(vec3(n1 * 10., 1, 1));
      n2 = sin(((n2 + 1.0) * 0.5) * 3.1415926 * 2.);
      
      float effect = smoothstep(0.1, 0.125, n1) * (1. - smoothstep(0.375, 0.4, n2));
      float coef = sin(n2 * 3.141526 * 0.5) * 0.125;
      float e = effect - abs(coef);
      e = n1 > 0.25 && n1 < 0.75? e * e : pow(e, 16.);

      vec4 diffuseColor = vec4(diffuse * e, opacity);
    `
  );
}
}));
const backCamera = new THREE.Camera();
const backRT = new THREE.WebGLRenderTarget(innerWidth, innerHeight);
scene.background = backRT.texture; // setting it to background
// </background stuff>

const clock = new THREE.Clock();

renderer.setAnimationLoop( _ => {
  const t = clock.getElapsedTime();
  gu.time.value = t;
  
  ico.rotation.x = t * 0.31;
  ico.rotation.y = t * 0.27;
  
  renderer.setRenderTarget(backRT); // assigning render target
  renderer.render(backScene, backCamera); // rendering the background
  
  renderer.setRenderTarget(null); // removing render target, now rendering to default buffer
  renderer.render(scene, camera); // rendering the scene again
  
  renderer.render(scene, camera);
})

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
  var noise = `
  //
/*

Truncated for brevity...
*/ 

`;
</script>

Using shaders to adjust the background color of a scene in three.js: A step-by-step guide

Answer №1

Similar questions

Is there a way to emphasize the closing div in editplus by automatically highlighting it when I click or select the corresponding opening

Discover a helpful tip for using Pentadactyl with StackExchange's voting buttons

Connecting to a fresh dynamic route does not impact the getInitialProps data

Running npm build/deploy is not functioning properly and is throwing a "failed to compile errors" message

Utilizing JavaScript For Loops for Code Repetition

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

The jQuery css method fails to apply styles to SVG circle elements

Arranging DIVs based on attribute using JQuery

Leverage the ajax variable within HighCharts

Differences between Vue.js onMounted and watching refsVue.js offers

Developing an ASP.NET application that returns a custom object in JSON format

Does Typescript fail to recognize the "delete" operator?

Switch to a new section element every 20 seconds

The removeEventListener method seems to be malfunctioning when used within an if statement in my three.js code

The total number of items in the cart is experiencing an issue with updating

Requests exceeding 8 kilobytes

Unable to navigate through bootstrap dropdown items using keyboard shortcuts

Distinguishing between if(a) and if(a!=null && a!=undefined)

Is there a method available to minimize the size of a local storage list containing strings?

I require a browse button on my JSP page that allows users to select folders, not individual files