"Capturing the essence of the web: Explore the

Question

"Capturing the essence of the web: Explore the

Hi there! Recently, I came across this fascinating short video at and I can't stop thinking about how to replicate that cool scanning effect.

From what I gathered, it seems like you need two groups: one with solid cubes and the other with wireframed cubes to create the layered effect.

But the real question is, how do you make the wireframed cubes appear in that awesome "scanner" way? Could it be done using shaders, or is there a masking technique in threejs that allows you to move the mask across the rendered image and reveal the object associated with it?

javascript three.js webgl shader

Answer 1

Answer №1

Referenced from the original demo's description at this link

This particular experiment draws its inspiration from the concept of projecting mapping onto physical shapes in the real world. The process involves generating a field through random means and then combining it into a singular geometry. This geometry is then duplicated, with the copy being rendered using a ShaderMaterial that focuses on a designated uniform point, causing most pixels to become transparent except for those in close proximity to the light point. By moving the point across the field, the effect of scanning is created.

In essence, the approach involves creating some geometry and depicting it twice – once in a flat shaded style and once in a wireframe form. For the wireframe version, a custom shader is implemented that utilizes a single point uniform. If a vertex (or pixel) is near this point, it will be drawn in color; otherwise, it will appear transparent (or be discarded).

var camera = new THREE.PerspectiveCamera( 20, 1, 1, 10000 );
camera.position.z = 1800;

var scene = new THREE.Scene();

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );

var flatMaterial = new THREE.MeshLambertMaterial( { color: 0x606060, shading: THREE.FlatShading } );
var geometry = new THREE.IcosahedronGeometry( 200, 1 );

//var wireMaterial = new THREE.MeshBasicMaterial( { color: 0x00FF00, wireframe:true  } );

var uniforms = {
    color:           { type: "c",  value: new THREE.Color(0x00FF00) },
    lightPos:        { type: "v3", value: new THREE.Vector3(0, 0, 0) },
    range:           { type: "f",  value: 150, },
};


var wireMaterial = new THREE.ShaderMaterial({
    wireframe:      true,
    uniforms:       uniforms,
    attributes:     {
    },
    vertexShader:   document.getElementById('vertexshader').text,
    fragmentShader: document.getElementById('fragmentshader').text,
    depthTest:      true,
    transparent:    true,
  });


varmesh = new THREE.Mesh( geometry, flatMaterial );
scene.add( mesh );

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

renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );

function resize() {
    var canvas = renderer.context.canvas
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (width != canvas.width || height != canvas.height) {
      renderer.setSize( width, height, false );
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    }
}

function render() {
  
    resize();
  
    var time = Date.now() * 0.001;
    uniforms.lightPos.value.x = Math.sin(time) * 200;
    uniforms.lightPos.value.y = Math.cos(time) * 200;
  
    camera.lookAt( scene.position );

    renderer.render( scene, camera );

    requestAnimationFrame( render );
}
render();

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<body>
</body>

    <script type="not-js" id="vertexshader">
      varying vec4 v_position;

      void main() {

        vec4 pos = vec4(position, 1.0);

        gl_Position = projectionMatrix * modelViewMatrix * pos;
        v_position = modelMatrix * pos;
      }

    </script>

    <script type="not-js" id="fragmentshader">

      uniform vec3 color;
      uniform vec3 lightPos;
      uniform float range;

      varying vec4 v_position;

      void main() {
        float distanceToLight = distance(lightPos, v_position.xyz);
        gl_FragColor = mix(vec4(color, 1), vec4(0,0,0,0), step(range, distanceToLight));

      }

    </script>

Answer 2

Referenced from the original demo's description at this link

This particular experiment draws its inspiration from the concept of projecting mapping onto physical shapes in the real world. The process involves generating a field through random means and then combining it into a singular geometry. This geometry is then duplicated, with the copy being rendered using a ShaderMaterial that focuses on a designated uniform point, causing most pixels to become transparent except for those in close proximity to the light point. By moving the point across the field, the effect of scanning is created.

In essence, the approach involves creating some geometry and depicting it twice – once in a flat shaded style and once in a wireframe form. For the wireframe version, a custom shader is implemented that utilizes a single point uniform. If a vertex (or pixel) is near this point, it will be drawn in color; otherwise, it will appear transparent (or be discarded).

var camera = new THREE.PerspectiveCamera( 20, 1, 1, 10000 );
camera.position.z = 1800;

var scene = new THREE.Scene();

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );

var flatMaterial = new THREE.MeshLambertMaterial( { color: 0x606060, shading: THREE.FlatShading } );
var geometry = new THREE.IcosahedronGeometry( 200, 1 );

//var wireMaterial = new THREE.MeshBasicMaterial( { color: 0x00FF00, wireframe:true  } );

var uniforms = {
    color:           { type: "c",  value: new THREE.Color(0x00FF00) },
    lightPos:        { type: "v3", value: new THREE.Vector3(0, 0, 0) },
    range:           { type: "f",  value: 150, },
};


var wireMaterial = new THREE.ShaderMaterial({
    wireframe:      true,
    uniforms:       uniforms,
    attributes:     {
    },
    vertexShader:   document.getElementById('vertexshader').text,
    fragmentShader: document.getElementById('fragmentshader').text,
    depthTest:      true,
    transparent:    true,
  });


varmesh = new THREE.Mesh( geometry, flatMaterial );
scene.add( mesh );

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

renderer = new THREE.WebGLRenderer( { antialias: true } );
document.body.appendChild( renderer.domElement );

function resize() {
    var canvas = renderer.context.canvas
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (width != canvas.width || height != canvas.height) {
      renderer.setSize( width, height, false );
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
    }
}

function render() {
  
    resize();
  
    var time = Date.now() * 0.001;
    uniforms.lightPos.value.x = Math.sin(time) * 200;
    uniforms.lightPos.value.y = Math.cos(time) * 200;
  
    camera.lookAt( scene.position );

    renderer.render( scene, camera );

    requestAnimationFrame( render );
}
render();

html, body {
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<body>
</body>

    <script type="not-js" id="vertexshader">
      varying vec4 v_position;

      void main() {

        vec4 pos = vec4(position, 1.0);

        gl_Position = projectionMatrix * modelViewMatrix * pos;
        v_position = modelMatrix * pos;
      }

    </script>

    <script type="not-js" id="fragmentshader">

      uniform vec3 color;
      uniform vec3 lightPos;
      uniform float range;

      varying vec4 v_position;

      void main() {
        float distanceToLight = distance(lightPos, v_position.xyz);
        gl_FragColor = mix(vec4(color, 1), vec4(0,0,0,0), step(range, distanceToLight));

      }

    </script>

Answer 3

Answer №2

Your scene is bombarded with numerous parallel rays, possibly 100 or any desired amount, which intersect it while simultaneously ascending in the y direction.

Answer 4

Your scene is bombarded with numerous parallel rays, possibly 100 or any desired amount, which intersect it while simultaneously ascending in the y direction.

"Capturing the essence of the web: Explore the

Answer №1

Answer №2

Similar questions

Reset jQuery validation when a button is clicked

Verifying the numerical value of a decimal place

Is it possible to invoke a shader with a unique array for every call, or would it be better to create multiple shaders instead?

CSS-enabled tabs built with React

What is the preferred approach: displaying a message using a service or a directive?

What is the best way to extract data from a series of nested JSON objects and insert it into a text field for editing?

Tips for triggering a click event on a DOM element using Angular 2

Prevent the Rain from descending

Discovering the magic of obtaining a random element in Vue.js

Using Javascript to dynamically add and remove elements on click

What are the steps for building modules using Vuex and fetching data using mapState()?

Can you explain the functionality of this Observable in the context of this Angular 2 example?

Is there a way to fetch a random record from a MongoDb collection and exhibit all the fields of that haphazardly chosen document in HTML?

Avoiding page refresh when clicking on a button component in React

Inject AJAX response text into a specific div element

Managing code requiring document.title in Next.js with Static Site Generation (SSG)

Issue with visibility of pagination in AngularJS ui

What is the solution for fixing an error that says "There is no 'style' property on the 'Element' type"?

Failure to validate two dates, even when they are both in date format within AngularJS

Which is more advantageous: returning a value or returning a local variable?