Fixed light source creates a steady illumination for the normal map background image on the website

Question

Fixed light source creates a steady illumination for the normal map background image on the website

I am interested in incorporating normal maps into the background images on my website. After exploring various implementations, I find that this example on CodePen utilizing three.js stands out as the best option. Despite being new to three.js, I am eager to learn and experiment.

The specific features I hope to achieve are:

① I would prefer the light source to remain static rather than follow the cursor's movement.

This preference stems from the fact that mouse-based interactions do not translate well to mobile devices. Additionally, effects tied to cursor movements can often be distracting. Instead, positioning the light source at a fixed location (such as the center of the page) and allowing it to interact with the background as users scroll seems like a more effective approach.

② I wish to confine the background image within a smaller div container, even when it does not need to span the entire page.

While this may seem straightforward, the current implementation appears to target either the body element or the entire window. Further investigation is needed...

③ I aim to be able to incorporate multiple normal map-enabled background images that share consistent lighting for scene coherence.

If the position of the light remains relative to the window dimensions, achieving this might not be overly complex.

④ It would be beneficial to have control over whether the image textures are tiled.

In traditional web development, this task is accomplished through the background-repeat CSS property. However, the process could differ in three.js. This aspect requires further exploration...

_{Note: The following points 5 and 6 are optional, but I will outline them in case there are insights on their implementation.}

⑤ Implementing the capability to illuminate the "scene" (comprising all normal map-enabled background images on the page) using an image instead of point lights, known as HDR image-based lighting. To prevent page bloat, low-resolution images must be utilized, yet the improvement in aesthetics could be substantial compared to point lights. Initial findings suggest that IBL support exists in three.js, though ongoing research is necessary.

⑥ While challenging to implement, introducing a subtle tilt in the background image or light source position responsive to motions detected by a mobile device accelerometer would be intriguing. However, given limitations in accessing accelerometer data by default on iOS as highlighted here, this idea may remain unfeasible. As an alternative, incorporating parallax motion linked to scrolling behavior could provide a comparable enhancement.

javascript three.js 3d shader normals

Answer 1

Answer №1

…please pardon my lack of knowledge and lofty ambitions.

Initially, take note of the creation date of this CodePen, which was done in version R71. A lot has evolved since then. Additionally, if you are delving into Three.js as you mentioned, commencing with a custom light implemented in a custom shader might not be the most ideal way to kickstart your journey with WebGL... 😉

Your needs can be fulfilled using various approaches, both simpler and more complex. The example you provided in the CodePen is one of the (much) more challenging ones.

Type "multiple" in examples and explore numerous results showcasing how you can achieve what you desire.

https://threejs.org/examples/?q=multiple#webgl_multiple_elements

Focusing back on your points...

① Prefer the light source to remain fixed instead of following the cursor.

There isn't a specific technique here; simply disable tracking mouse movements and position the chosen light statically.

② Desire the ability to place the background image within a smaller div for cases where it doesn't cover the entire page.

Edit the canvas size as per your requirements, position it in another div as desired. For dynamic resizing (usually recommended), set up a listener for screen size alterations. Refer to the example below for inserting textures...

③ Wish to define multiple normal map enabled background images illuminated by shared lighting (for seamless scene continuity).

You can designate the light as shared or isolate it for a specific canvas. As evident from the example you shared.

④ Want to specify that the image textures be tiled.

The example showcases 4 tiles. Of course, you can divide the viewport as needed, but it's advisable to invest some time assessing performance closely. Using render scissors might be the most suitable solution. https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setScissor

Generally, for versatility, you can have one canvas with several scenes or opt for a separate canvas for each scene. It all boils down to individual project requirements and adjusting the efficiency-effect balance.

⑤ …In essence, HDR image-based lighting…

Take a look here…

⑥ A subtle tilt of the background image position (or light source position) in response to movements detected by the mobile device accelerometer would be cool…

About Sensors and Parallax, refer to here and here.

Example

body { margin: 0; overflow: hidden; }
.background-div { position: absolute; width: 50vw; height: 50vh; }
#background1 { top: 0; left: 0; }
#background2 { top: 0; left: 50vw; }
#background3 { top: 50vh; left: 0; }
#background4 { top: 50vh; left: 50vw; }

<div class="background-div" id="background1"></div>
<div class="background-div" id="background2"></div>
<div class="background-div" id="background3"></div>
<div class="background-div" id="background4"></div>

<script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2e32283f3f1a6a746b6c6c746a">[email protected]</a>/build/three.module.js",
  "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50243822353510607e6166667e60">[email protected]</a>/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

function fourPlanes(container) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enabled = true;

const light = new THREE.PointLight(0xFFFF00, 777, 100);
light.position.set(40, 0, 10);
scene.add(light);

function createTexturedPlane(textureURL, normalMapURL, position, scene) {
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(textureURL);
    const normalMap = textureLoader.load(normalMapURL);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(4, 4);
    normalMap.repeat.set(4, 4);

const material = new THREE.MeshStandardMaterial({
        map: texture,
        normalMap: normalMap,
    });

    const geometry = new THREE.PlaneGeometry(10, 10);
    const plane = new THREE.Mesh(geometry, material);
    plane.position.copy(position);

    scene.add(plane);
    
}
createTexturedPlane('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/water.jpg', 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg', new THREE.Vector3(0, 0, 0), scene);

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
});
}

const background1 = document.getElementById('background1');
const background2 = document.getElementById('background2');
const background3 = document.getElementById('background3');
const background4 = document.getElementById('background4');

fourPlanes(background1);
fourPlanes(background2);
fourPlanes(background3);
fourPlanes(background4);

</script>

Answer 2

…please pardon my lack of knowledge and lofty ambitions.

Initially, take note of the creation date of this CodePen, which was done in version R71. A lot has evolved since then. Additionally, if you are delving into Three.js as you mentioned, commencing with a custom light implemented in a custom shader might not be the most ideal way to kickstart your journey with WebGL... 😉

Your needs can be fulfilled using various approaches, both simpler and more complex. The example you provided in the CodePen is one of the (much) more challenging ones.

Type "multiple" in examples and explore numerous results showcasing how you can achieve what you desire.

https://threejs.org/examples/?q=multiple#webgl_multiple_elements

Focusing back on your points...

① Prefer the light source to remain fixed instead of following the cursor.

There isn't a specific technique here; simply disable tracking mouse movements and position the chosen light statically.

② Desire the ability to place the background image within a smaller div for cases where it doesn't cover the entire page.

Edit the canvas size as per your requirements, position it in another div as desired. For dynamic resizing (usually recommended), set up a listener for screen size alterations. Refer to the example below for inserting textures...

③ Wish to define multiple normal map enabled background images illuminated by shared lighting (for seamless scene continuity).

You can designate the light as shared or isolate it for a specific canvas. As evident from the example you shared.

④ Want to specify that the image textures be tiled.

The example showcases 4 tiles. Of course, you can divide the viewport as needed, but it's advisable to invest some time assessing performance closely. Using render scissors might be the most suitable solution. https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setScissor

Generally, for versatility, you can have one canvas with several scenes or opt for a separate canvas for each scene. It all boils down to individual project requirements and adjusting the efficiency-effect balance.

⑤ …In essence, HDR image-based lighting…

Take a look here…

⑥ A subtle tilt of the background image position (or light source position) in response to movements detected by the mobile device accelerometer would be cool…

About Sensors and Parallax, refer to here and here.

Example

body { margin: 0; overflow: hidden; }
.background-div { position: absolute; width: 50vw; height: 50vh; }
#background1 { top: 0; left: 0; }
#background2 { top: 0; left: 50vw; }
#background3 { top: 50vh; left: 0; }
#background4 { top: 50vh; left: 50vw; }

<div class="background-div" id="background1"></div>
<div class="background-div" id="background2"></div>
<div class="background-div" id="background3"></div>
<div class="background-div" id="background4"></div>

<script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a2e32283f3f1a6a746b6c6c746a">[email protected]</a>/build/three.module.js",
  "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50243822353510607e6166667e60">[email protected]</a>/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

function fourPlanes(container) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enabled = true;

const light = new THREE.PointLight(0xFFFF00, 777, 100);
light.position.set(40, 0, 10);
scene.add(light);

function createTexturedPlane(textureURL, normalMapURL, position, scene) {
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load(textureURL);
    const normalMap = textureLoader.load(normalMapURL);
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(4, 4);
    normalMap.repeat.set(4, 4);

const material = new THREE.MeshStandardMaterial({
        map: texture,
        normalMap: normalMap,
    });

    const geometry = new THREE.PlaneGeometry(10, 10);
    const plane = new THREE.Mesh(geometry, material);
    plane.position.copy(position);

    scene.add(plane);
    
}
createTexturedPlane('https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/water.jpg', 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg', new THREE.Vector3(0, 0, 0), scene);

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
});
}

const background1 = document.getElementById('background1');
const background2 = document.getElementById('background2');
const background3 = document.getElementById('background3');
const background4 = document.getElementById('background4');

fourPlanes(background1);
fourPlanes(background2);
fourPlanes(background3);
fourPlanes(background4);

</script>

Fixed light source creates a steady illumination for the normal map background image on the website

Answer №1

Similar questions

Using THREE.js to animate between two specific points on a spherical object

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

Issue with Angular 5: Bootstrap Tooltip not functioning as expected

"Enhance the functionality of material-table by incorporating a multi-select feature

Mastering the Art of Manipulating SkinnedMesh Bones in THREE.JS

Tips for avoiding variable overwriting while utilizing it in a for loop to color objects

Using React and Material-UI to dynamically populate a table with data retrieved from

I am experiencing difficulty scrolling down on my website. Can anyone offer suggestions on how to resolve this issue?

The correct way to create a Reaction Collection

Create a dynamic animation of an image expanding and shifting towards the center of its parent container

Prevent HTML Link from being accessed again after being clicked

Helper for Three.js edges

Seamless Integration of Hosted Fields by Braintree

What is the best way to achieve dolly or zoom effects with React three fiber or threejs?

Switch from using a select tag to a check box to easily switch between a dark and light theme

Executing a function on a dynamically generated JavaScript button

Exploring the implementation of an if condition within a button tag

displaying a pair of inputs next to each other

Data retrieved from API not displaying in Angular Material table

Double-checked in p:commandButton, encountering a race condition with oncomplete