javascript - 如何在着色器中将图片添加到背景？

问题描述

如何添加图片而不是蓝色，或者使蓝色透明？

这是一个代码片段：

/*
Most of the stuff in here is just bootstrapping. Essentially it's just
setting ThreeJS up so that it renders a flat surface upon which to draw 
the shader. The only thing to see here really is the uniforms sent to 
the shader. Apart from that all of the magic happens in the HTML view
under the fragment shader.
*/

let container;
let camera, scene, renderer;
let uniforms;

function init() {
  container = document.getElementById( 'container' );

  camera = new THREE.Camera();
  camera.position.z = 1;

  scene = new THREE.Scene();

  var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

  uniforms = {
    u_time: { type: "f", value: Math.random() * 1000.0 },
    u_resolution: { type: "v2", value: new THREE.Vector2() },
    u_mouse: { type: "v2", value: new THREE.Vector2() }
  };

  var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  } );

  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );

  container.appendChild( renderer.domElement );

  onWindowResize();
  window.addEventListener( 'resize', onWindowResize, false );

  document.onmousemove = function(e){
    uniforms.u_mouse.value.x = e.pageX
    uniforms.u_mouse.value.y = e.pageY
  }
}

function onWindowResize( event ) {
  renderer.setSize( window.innerWidth, window.innerHeight );
  uniforms.u_resolution.value.x = renderer.domElement.width;
  uniforms.u_resolution.value.y = renderer.domElement.height;
}

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

function render() {
  uniforms.u_time.value += 0.05;
  renderer.render( scene, camera );
}



init();
animate();

html, body {
  height: 100%;
  margin: 0;
}
body {
  overflow: auto;
}

.to-change-container {
  height: 300px;
  width:300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.height-stratcher {
  height: 1000px;
}

.to-change {
  max-height: 100%;
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec2 u_resolution;
    uniform float u_time;
  
    const float NOISE_SIZE = 3.; // The size of the noise. Essentially the multiplier for the noise UV. Smaller = bigger
    const float INTENSITY = 20.; // The intensity of the displacement
    const float REFLECTION_INTENSITY = 4.; // The intensity of the rellowish reflections.
    const int octaves = 2; // the number of octaves to generate in the FBM noise
    const float seed = 43758.5453123; // A random seed :)
  
    /*
      Underwater Sun
      Liam Egan - 2018
      ----------------------

      A basic rippling pattern distorted by a very light amount of FBM noise.
      
      Many many thanks to Inigo Quilez, Patricio Gonzalez Vivo, 
      Gary Warne, and many many others.
      "Nanos gigantum humeris insidentes"

    */
  
    vec2 random2(vec2 st, float seed){
        st = vec2( dot(st,vec2(127.1,311.7)),
                  dot(st,vec2(269.5,183.3)) );
        return -1.0 + 2.0*fract(sin(st)*seed);
    }
  
    // Value Noise by Inigo Quilez - iq/2013
    // https://www.shadertoy.com/view/lsf3WH
    float noise(vec2 st, float seed) {
        vec2 i = floor(st);
        vec2 f = fract(st);

        vec2 u = f*f*(3.0-2.0*f);

        return mix( mix( dot( random2(i + vec2(0.0,0.0), seed ), f - vec2(0.0,0.0) ), 
                         dot( random2(i + vec2(1.0,0.0), seed ), f - vec2(1.0,0.0) ), u.x),
                    mix( dot( random2(i + vec2(0.0,1.0), seed ), f - vec2(0.0,1.0) ), 
                         dot( random2(i + vec2(1.0,1.0), seed ), f - vec2(1.0,1.0) ), u.x), u.y);
    }
  
    float fbm1(in vec2 _st, float seed) {
      float v = 0.0;
      float a = 0.5;
      vec2 shift = vec2(100.0);
      // Rotate to reduce axial bias
      mat2 rot = mat2(cos(0.5), sin(0.5),
                      -sin(0.5), cos(0.50));
      for (int i = 0; i < octaves; ++i) {
          v += a * noise(_st, seed);
          _st = rot * _st * 2.0 + shift;
          a *= 0.4;
      }
      return v + .4;
    }
  
    float pattern(vec2 uv, float seed, float time, inout vec2 q, inout vec2 r) {

      q = vec2( fbm1( uv + vec2(0.0,0.0), seed ),
                     fbm1( uv + vec2(5.2,1.3), seed ) );

      r = vec2( fbm1( uv + 4.0*q + vec2(1.7 - time / 2.,9.2), seed ),
                     fbm1( uv + 4.0*q + vec2(8.3 - time / 2.,2.8), seed ) );

      float rtn = fbm1( uv + 4.0*r, seed );

      return rtn;
    }
  
    mat2 rotate(float angle) {
      return mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
    }

    void main() {
      vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;
      
      // Generate our displacement map
      vec2 _uv = uv * NOISE_SIZE;
      vec2 q = vec2(0.);
      vec2 r = vec2(0.);
      float pattern = pattern(_uv, seed, u_time/2., q, r);
      
      uv += (.5 - pattern) / INTENSITY; // modulate the main UV coordinates by the pattern
      // uv -= .5 / INTENSITY; // This just recenters the UV coords after the distortion
      
      float len = length(uv) + .01;
      
      float field = len+0.05*(-1.0*u_time / 5.); // The distance field from the middle to the edge

      float ripple;
      ripple = sin(field*80.0) * .5 * r.x * pattern + 1.; // The ripple pattern
      ripple += smoothstep(0.2,.0,len); // Adding a core gradient to the sun. Essentially this is just a smoothed version of the distance field
      ripple *= smoothstep(0.3,.9,clamp(1. - len * 1.5,0.0,1.0)); // Vignette the sun, making it smaller than infinity
      
      ripple -= fract(ripple * 8.) / 100.; // Adds a nice sort of reflective element
      
      vec3 colour = vec3(.2, .3, .4); // the basic colour
      colour += ripple * length(r) * vec3(1., 1., .8); // ripple times sun colour
      colour += (1. - pattern * REFLECTION_INTENSITY * .5) * smoothstep(0.0,.7,clamp(1. - len * 1.5,0.0,1.0)) * vec3(-.2, -.1, 0.); // vignette and reflection
      colour += (1. - pattern * REFLECTION_INTENSITY * 2.) * smoothstep(0.5,.9,clamp(1. - len * 1.5,0.0,1.0)) * vec3(-.2, -.1, 0.); // vignette and reflection 2 - this is essentially a more intense, but reduced radius version of the previous one.
 
      gl_FragColor = vec4(colour, 1.);
    }
</script>


<div id="container"></div>

标签： javascripthtmlcsscanvasglsl

javascript - 如何在着色器中将图片添加到背景？

问题描述

解决方案

推荐阅读