THREE.js задание связанное с mipmaps

245

13 июля 2022, 04:20

Есть задание связанное с mipmaps. По сути задание такого - есть 3Д фигура (допустим сфера) и при приближении камеры к фигуре начинает проявляться мапинг. То есть, за ранние прописать расстояние до камеры при котором начинает проявляться мапинг и прописать сами текстуры мапинга - скажем вся фигура синего цвета а при приближении та часть которая попадает в рендж мапинга изменяется на желтый, а потом и на красный (то есть несколько уровней мапинга). Должна получиться такая картина при сильном приближении: ближайшая к нам часть фигуры красная, потом чуть по дальше желтая, а вся остальная так и остается синей. Задание должно быть выполнено на библиотеке THREE.js. Очень полезно будет если у вас есть ссылка на подобный пример с кодом или просто нормальная литература для подобной задачи, ибо оригинальная документация мягко говоря ничем не помогает.

Answer 1

если тупо цвет менять, то можно так. Если нужны mipmaps текстуры, то в treejs есть пример с полом, где цветом выделены зоны ответственности каждой https://threejs.org/examples/?q=mip#webgl_materials_texture_manualmipmap

const vertexShader = `
  varying float distToCamera;
  void main()
  {
      vec4 cs_position = modelViewMatrix * vec4( position, 1.0 );
      distToCamera = -cs_position.z;
      gl_Position = projectionMatrix * cs_position;
  }
`;
const fragmentShader = `
  varying float distToCamera;
  void main() {
    float d = distToCamera;
    if(d>5.0) gl_FragColor = vec4( 1.0, 0.0, 0.0, 0.5 );
    else if(d>4.0) gl_FragColor = vec4( 0.0, 1.0, 0.0, 0.5 );
    else if(d>3.0) gl_FragColor = vec4( 0.0, 0.0, 1.0, 0.5 );
    else if(d>2.0) gl_FragColor = vec4( 0.0, 1.0, 1.0, 0.5 );
    else gl_FragColor = vec4( 1.0, 1.0, 0.0, 0.5 );
  }
`;
const canvas=document.getElementById( 'canvas' );
const width = canvas.clientWidth;
const height = canvas.clientHeight;
console.log(width,height);
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.1, 20 );
camera.position.set( 0, 0, 5 );
const   renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
const light = new THREE.PointLight( 0xffffff );
light.position.set( 2, 2, 1 );
scene.add( light );
scene.add(new THREE.AmbientLight(0xffffff));
const   mesh = new THREE.Mesh( 
  new THREE.BoxBufferGeometry( 1, 1, 1 ), 
  new THREE.ShaderMaterial( {
          vertexShader,
                    fragmentShader
                } ) );
scene.add( mesh );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
render();
function render() {
  renderer.render( scene, camera );
}

body{
  margin: 0;
  padding: 0;
}
canvas{
  display:block;
  width:100vw;
  heigth:100vh;
}

    <script src="https://unpkg.com/three@0.123.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.123.0/examples/js/controls/OrbitControls.js"></script>
<canvas id="canvas"></canvas>