Блог

Главная - Вопросы по программированию - Создание упрощенного отражающего пользовательского шейдера в A-FRAME

Создание упрощенного отражающего пользовательского шейдера в A-FRAME

#webgl #shader #aframe #webvr

#webgl #шейдер #aframe #webvr

Вопрос:

Итак, я неизбежно пошел по пути пользовательских шейдеров в A-FRAME. Действительно исследуя это, и учитывая, что меня можно считать новичком в этой технологии, я столкнулся со всевозможными сложными и не очень понятными решениями.

Примеры, подобные: https://rawgit.com/mrdoob/three.js/master/examples/webgl_materials_cubemap_balls_reflection.html , создают даже больше вопросов, чем ответов.

Однако, когда я посетил этот пример: https://stemkoski.github.io/Three.js/Reflection.html , Я заметил другой подход, который казался немного более упрощенным.

Это побудило меня больше узнать о CubeCameras и о том, как threejs может использовать его в качестве шейдера для имитации отражения.

 //Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );

//Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );

//Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.updateCubeMap( renderer, scene );

//Render the scene
car.setVisible( true );
renderer.render( scene, camera );

Теперь вопрос в том, как я могу перевести это в A-FRAME? Я попробовал следующее:

 AFRAME.registerComponent('chromeThing', {
      schema: {
        ???
      },

      init: function () {
        var el = this.el;  // Entity.
        var cubeCam = document.querySelector('#cubeCam'); //There is an <a-entity camera id="cubeCam">
        var mirrorCubeMaterial = new THREE.MeshBasicMaterial( { envMap: cubeCam.renderTarget } );
        mirrorCube = new THREE.Mesh( el, mirrorCubeMaterial );

        el.setObject3D('mesh', mirrorCube);
      }
    });

Как вы могли заметить, я не уверен, какова будет схема этого.
Кроме того, это должен быть шейдер или компонент? (как я мог бы использовать это наилучшим образом)

РЕДАКТИРОВАТЬ: после ответа @ngokevin я придумал этот код, который все еще не дает мне желаемых результатов.

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chrome box</title>
    <meta name="description" content="Physically-Based Materials - A-Frame">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/master/components/reverse-look-controls/index.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="equi1" crossorigin  src="https://rawgit.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" preload="auto">
      </a-assets>
        <!-- MAIN CAMERA -->
        <a-entity id="mainCam" camera="userHeight: 1.6" reverse-look-controls wasd-controls></a-entity>

        <!-- CMAERA FOR TEXTURE (?) -->
        <a-entity id="cubecamera" camera near="0.1" far="5000" fov="512"></a-entity>

        <!-- SKY DOME TO REFLECT ON BOX -->
        <a-sky src="#equi1"></sky>

        <!-- MAKE THIS BOX CHROME -->
        <a-box id="theCube" camera-envmap-material="#cubecamera" color="tomato" depth="2" height="4" width="5" position="0 0 -3" materials=""></a-box> 
        <!-- THIS BOX IS MOVING AND SHOULD REFLECT ON THE CHROME BOX -->
        <a-box id="reflector" color="red" position="0 0 20">
          <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-box>
    </a-scene>
  </body>

 <script>

AFRAME.registerComponent('camera-envmap-material', {
  dependencies: ['material'],

  // Selector type so we do `<a-entity camera-envmap-material="#cubecamera">`.
  schema: {
    type: 'selector'
  },

  init: function () {
    var cameraEl = this.data;
    var material = this.el.getObject3D('mesh').material;

    // Set envmap on existing material.
    // This assumes you have a CubeCamera component that does `setObject3D('cube-camera', new THREE.CubeCamera)`.

    material.envMap = cameraEl.getObject3D('camera').renderTarget;
    material.needsUpdate = true;
  }
});

  </script>
</html>

ОБНОВЛЕНИЕ # 2

Однако после рекомендаций от @ngokevin вот где я нахожусь, я не могу обновить компонент. Проблема, похоже, заключается в передаче переменных в tick:function() , я продолжаю получать Uncaught TypeError: Cannot read property 'renderTarget' of undefined 

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chrome box</title>
    <meta name="description" content="Physically-Based Materials - A-Frame">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/master/components/reverse-look-controls/index.js"></script>
  </head>
  <body>
<a-scene>
      <a-assets>
        <img id="equi1" crossorigin src="https://rawgit.com/aframevr/aframe/master/examples/boilerplate/panorama/puydesancy.jpg" preload="auto">
      </a-assets>
        <!-- MAIN CAMERA -->
        <a-entity id="mainCam" camera="userHeight: 1.6" reverse-look-controls wasd-controls></a-entity>

        <!-- SKY DOME TO REFLECT ON BOX -->
        <a-sky src="#equi1"></sky>

        <!-- MAKE THIS BOX CHROME -->
        <a-box id="theCube" camera-envmap-material depth="2" height="4" width="5" position="0 0 -3" metalness="1">
        </a-box>
        <!-- MAKE THIS ROTATE AND REFLECT ON CHROME --> 
        <a-box id="reflector" color="red" position="0 0 10">
        <a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
        </a-box>
     </a-scene>
  </body>

 <script>
AFRAME.registerComponent('camera-envmap-material', {
  dependencies: ['material'],

  init: function(data) {
    this.cameraEl = this.data;
    this.material = this.el.getObject3D('mesh').material;
    this.theElement = this.el;
    this.theScene = this.theElement.sceneEl;

    if (!this.theScene.renderStarted) {
      this.theScene.addEventListener('renderstart', this.init.bind(this));
      return;
    }
    this.cubeCamera = new THREE.CubeCamera( 0.1, 5000, 512);
    this.cubeCamera.position.set(5, 2, 4);
    this.cubeCamera.updateCubeMap( this.theScene.renderer, this.theScene.object3D );
    this.theElement.setObject3D('cube-camera', this.cubeCamera);
    this.material.envMap = this.cubeCamera.renderTarget;
    this.material.needsUpdate = true;
  },
  tick:function(){
    this.material.envMap = this.cubeCamera.renderTarget;
    this.material.needsUpdate = true;
  }
});
  </script>
</html>

Ответ №1:

Компонент мог бы устанавливать свойства для существующего материала. Шейдер больше предназначен для регистрации шейдеров / материалов, но в A-Frame уже есть базовые / стандартные материалы. И вам нужно свойство selector в схеме.:

 AFRAME.registerComponent('camera-envmap-material', {
  dependencies: ['material'],

  // Selector type so we do `<a-entity camera-envmap-material="#cubecamera">`.
  schema: {
    type: 'selector'
  },

  init: function () {
    var cameraEl = this.data;
    var material = this.el.getObject3D('mesh').material;

    // Set envmap on existing material.
    // This assumes you have a CubeCamera component that does `setObject3D('cube-camera', new THREE.CubeCamera)`.

    material.envMap = cameraEl.getObject3D('camera').renderTarget;
    material.needsUpdate = true;
  }
});

Обновить

 AFRAME.registerComponent('camera-envmap-material', {
  dependencies: ['material'],

  init: function () {
    var cameraEl = this.data;
    var material = this.el.getObject3D('mesh').material;

    if (!this.el.sceneEl.renderStarted) {
      this.el.sceneEl.addEventListener('renderstart', this.init.bind(this));
      return;
    }

      var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
    cubeCamera.position.set(5, 2, 4);
    cubeCamera.updateCubeMap( this.el.sceneEl.renderer, this.el.sceneEl.object3D );
    this.el.setObject3D('cube-camera', cubeCamera);
    material.envMap = cubeCamera.renderTarget;
    material.needsUpdate = true;
  }
});

Комментарии:

1. Спасибо @ngokevin, я отредактировал свой оригинальный пост, чтобы показать полный код. Я не получаю никаких ошибок в консоли, но окно по-прежнему не текстурируется с помощью chrome. Любые мысли о том, чего здесь не хватает.

2. похоже, именно здесь я ошибаюсь: » Это предполагает, что у вас есть компонент CubeCamera, который это делает setObject3D('cube-camera', new THREE.CubeCamera) » .

3. Да, это более или менее структура / скелет кода, вам нужно будет заполнить некоторые вещи, например, создать компонент CubeCamera (или создать его в компоненте, если сейчас это слишком много).

4. codepen.io ? codepen.io/jonalex/pen/ORxjJk Я добавил var camera = новые ТРИ. CubeCamera(1, 100000, 128); для init(), но я не уверен, как на самом деле добавить его в сцену и использовать в предоставленном вами компоненте.

5. codepen.io/team/mozvr/pen/bwoAAz У меня вроде как все получилось. Вы добавляете в сцену с el.setObject3D помощью . Также пришлось ждать средства визуализации.