123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js WebGL 2 - Uniform Buffer Objects Arrays</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- </head>
- <body>
- <div id="info">
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Uniform Buffer Objects Arrays
- </div>
- <div id="container"></div>
- <script id="vertexShader" type="x-shader/x-vertex">
- uniform ViewData {
- mat4 projectionMatrix;
- mat4 viewMatrix;
- };
- uniform mat4 modelMatrix;
- uniform mat3 normalMatrix;
- in vec3 position;
- in vec3 normal;
- in vec2 uv;
- out vec2 vUv;
- out vec3 vPositionEye;
- out vec3 vNormalEye;
- void main() {
- vec4 vertexPositionEye = viewMatrix * modelMatrix * vec4( position, 1.0 );
- vPositionEye = (modelMatrix * vec4( position, 1.0 )).xyz;
- vNormalEye = (vec4(normal , 1.)).xyz;
- vUv = uv;
- gl_Position = projectionMatrix * vertexPositionEye;
- }
- </script>
- <script id="fragmentShader" type="x-shader/x-vertex">
- precision highp float;
- precision highp int;
- uniform LightingData {
- vec4 lightPosition[POINTLIGHTS_MAX];
- vec4 lightColor[POINTLIGHTS_MAX];
- float pointLightsCount;
- };
-
- #include <common>
- float getDistanceAttenuation( const in float lightDistance, const in float cutoffDistance, const in float decayExponent ) {
-
- float distanceFalloff = 1.0 / max( pow( lightDistance, decayExponent ), 0.01 );
-
- if ( cutoffDistance > 0.0 ) {
-
- distanceFalloff *= pow2( saturate( 1.0 - pow4( lightDistance / cutoffDistance ) ) );
-
- }
-
- return distanceFalloff;
-
- }
- in vec2 vUv;
- in vec3 vPositionEye;
- in vec3 vNormalEye;
- out vec4 fragColor;
- void main() {
- vec4 color = vec4(vec3(0.), 1.);
- for (int x = 0; x < int(pointLightsCount); x++) {
- vec3 offset = lightPosition[x].xyz - vPositionEye;
- vec3 dirToLight = normalize( offset );
- float distance = length( offset );
- float diffuse = max(0.0, dot(vNormalEye, dirToLight));
- float attenuation = 1.0 / (distance * distance);
- vec3 lightWeighting = lightColor[x].xyz * getDistanceAttenuation( distance, 4., .7 );
- color.rgb += lightWeighting;
- }
- fragColor = color;
- }
- </script>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.module.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import Stats from 'three/addons/libs/stats.module.js';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- let camera, scene, renderer, clock, stats;
- let lightingUniformsGroup, lightCenters;
- const container = document.getElementById( 'container' );
- const pointLightsMax = 300;
- const api = {
- count: 200,
- };
- init();
- function init() {
- camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
- camera.position.set( 0, 50, 50 );
- scene = new THREE.Scene();
- camera.lookAt( scene.position );
- clock = new THREE.Clock();
- // geometry
- const geometry = new THREE.SphereGeometry();
- // uniforms groups
- lightingUniformsGroup = new THREE.UniformsGroup();
- lightingUniformsGroup.setName( 'LightingData' );
- const data = [];
- const dataColors = [];
- lightCenters = [];
- for ( let i = 0; i < pointLightsMax; i ++ ) {
- const col = new THREE.Color( 0xffffff * Math.random() ).toArray();
- const x = Math.random() * 50 - 25;
- const z = Math.random() * 50 - 25;
- data.push( new THREE.Uniform( new THREE.Vector4( x, 1, z, 0 ) ) ); // light position
- dataColors.push( new THREE.Uniform( new THREE.Vector4( col[ 0 ], col[ 1 ], col[ 2 ], 0 ) ) ); // light color
- // Store the center positions
- lightCenters.push( { x, z } );
- }
- lightingUniformsGroup.add( data ); // light position
- lightingUniformsGroup.add( dataColors ); // light position
- lightingUniformsGroup.add( new THREE.Uniform( pointLightsMax ) ); // light position
- const cameraUniformsGroup = new THREE.UniformsGroup();
- cameraUniformsGroup.setName( 'ViewData' );
- cameraUniformsGroup.add( new THREE.Uniform( camera.projectionMatrix ) ); // projection matrix
- cameraUniformsGroup.add( new THREE.Uniform( camera.matrixWorldInverse ) ); // view matrix
- const material = new THREE.RawShaderMaterial( {
- uniforms: {
- modelMatrix: { value: null },
- normalMatrix: { value: null }
- },
- // uniformsGroups: [ cameraUniformsGroup, lightingUniformsGroup ],
- name: 'Box',
- defines: {
- POINTLIGHTS_MAX: pointLightsMax
- },
- vertexShader: document.getElementById( 'vertexShader' ).textContent,
- fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
- glslVersion: THREE.GLSL3
- } );
- const plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), material.clone() );
- plane.material.uniformsGroups = [ cameraUniformsGroup, lightingUniformsGroup ];
- plane.material.uniforms.modelMatrix.value = plane.matrixWorld;
- plane.material.uniforms.normalMatrix.value = plane.normalMatrix;
- plane.rotation.x = - Math.PI / 2;
- plane.position.y = - 1;
- scene.add( plane );
- // meshes
- const gridSize = { x: 10, y: 1, z: 10 };
- const spacing = 6;
- for ( let i = 0; i < gridSize.x; i ++ ) {
- for ( let j = 0; j < gridSize.y; j ++ ) {
- for ( let k = 0; k < gridSize.z; k ++ ) {
- const mesh = new THREE.Mesh( geometry, material.clone() );
- mesh.name = 'Sphere';
- mesh.material.uniformsGroups = [ cameraUniformsGroup, lightingUniformsGroup ];
- mesh.material.uniforms.modelMatrix.value = mesh.matrixWorld;
- mesh.material.uniforms.normalMatrix.value = mesh.normalMatrix;
- scene.add( mesh );
- mesh.position.x = i * spacing - ( gridSize.x * spacing ) / 2;
- mesh.position.y = 0;
- mesh.position.z = k * spacing - ( gridSize.z * spacing ) / 2;
- }
- }
- }
- //
- renderer = new THREE.WebGLRenderer( { antialias: true } );
- renderer.setSize( window.innerWidth, window.innerHeight );
- renderer.setAnimationLoop( animate );
- container.appendChild( renderer.domElement );
- window.addEventListener( 'resize', onWindowResize, false );
- // controls
- const controls = new OrbitControls( camera, renderer.domElement );
- controls.enablePan = false;
- // stats
- stats = new Stats();
- document.body.appendChild( stats.dom );
- // gui
- const gui = new GUI();
- gui.add( api, 'count', 1, pointLightsMax ).step( 1 ).onChange( function () {
- lightingUniformsGroup.uniforms[ 2 ].value = api.count;
- } );
- }
- function onWindowResize() {
- camera.aspect = window.innerWidth / window.innerHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( window.innerWidth, window.innerHeight );
- }
- //
- function animate() {
- const elapsedTime = clock.getElapsedTime();
- const lights = lightingUniformsGroup.uniforms[ 0 ];
-
- // Parameters for circular movement
- const radius = 5; // Smaller radius for individual circular movements
- const speed = 0.5; // Speed of rotation
- // Update each light's position
- for ( let i = 0; i < lights.length; i ++ ) {
- const light = lights[ i ];
- const center = lightCenters[ i ];
- // Calculate circular movement around the light's center
- const angle = speed * elapsedTime + i * 0.5; // Phase difference for each light
- const x = center.x + Math.sin( angle ) * radius;
- const z = center.z + Math.cos( angle ) * radius;
- // Update the light's position
- light.value.set( x, 1, z, 0 );
- }
- renderer.render( scene, camera );
- stats.update();
- }
- </script>
- </body>
- </html>
|