Содержание

• 2D
• WebGL
• 3D графика
• Three.js
• Плеер для просмотра 3D моделей
• Шейдеры

Отличия 2D от 3D

Отличия 2D от 3D

Плоскость или пространство

Имитация 3D

WebGL

• HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES 1.1
• 2D/3D

Десктопные браузеры

Мобильные браузеры

Проверка поддержки WebGL

Технологии 3D

Преимущества WebGL

• Открытый стандарт
• Высокая производительность
• Автоматическое управление памятью
• Кроссплатформенность

Отсутствие компиляции

WebGL

+

+

GLSL ES

Программа на WebGL

Точка

Основные понятия

Сцена Свет Камера

Меш

Меш

Меш

Визуализация

• Рендер
• Шейдер
• Анимация

Three.js

Экспортируемые форматы

Входные данные

texture.jpg

Алгоритм

Выходной результат

Сцена

      Player.container = document.getElementById("webgl-player");
      Player.size = {
         width: Player.container.offsetWidth,
         height: Player.container.offsetHeight
      };
      Player.scene = new THREE.Scene();
    

Свет, рендер, canvas

      var light = new THREE.AmbientLight();
      Player.scene.add(Player.light);
      

        Player.renderer = new THREE.WebGLRenderer({alpha: true});
        Player.renderer.setSize(Player.size.width, Player.size.height);
      
      

        // canvas
        Player.container.appendChild(Player.renderer.domElement);
      
    

WebGLRenderer

	THREE.WebGLRenderer()
	THREE.WebGLRenderer({alpha: true})

Текстура

      var textureLoader = new THREE.TextureLoader();
      textureLoader.load("texture.jpg", function(texture) {
         Player.texture = texture;
         Player.loadModel();
      });
    

Загрузка 3D модели

      loadModel: function() {
        var objectLoader = new THREE.OBJLoader();
        objectLoader.load("object.obj", function(object) {
      

            object.traverse(function(child) {
              if (child instanceof THREE.Mesh) {
                child.material.map = Player.texture; }
            });
      
      

            Player.scene.add(object);
          });
        }
      
    

Отрисовка

      Player.animate();
      animate: function() {
         requestAnimationFrame(Player.animate);
         Player.renderer.render(Player.scene, Player.camera);
      }
    

Вращение

      Player.controls = new THREE.TrackballControls(
         Player.camera,
         Player.container
      );
      

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

requestAnimationFrame

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

Отмена анимации

      requestId = requestAnimationFrame(animate);
      cancelAnimationFrame(requestId);
    

Модель с текстурой

GLSL

• Синтаксис C
• Типы
• Задействует GPU
• Строки
• Runtime

Виды шейдеров

• Вершинные шейдеры
• Фрагментные шейдеры

Растеризация

Типы данных

• bool
• int
• float
• vec2 / vec3 / vec4
• mat2 / mat3 / mat4
• sampler2D

Запись переменных

Вершинный шейдер

      <script type="x-shader/x-vertex" id="shader-vs">  
        varying vec2 vUv;  
        void main() {  
          vUv = uv;
          vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
          gl_Position = projectionMatrix * mvPosition;   
        }      
        </script>
      

Фрагментный шейдер

      <script type="x-shader/x-fragment" id="shader-fs">  
        uniform sampler2D u_Sampler;
        varying vec2 vUv;  
        void main() {  
          gl_FragColor = texture2D(u_Sampler, vUv);    
        }      
        </script>
    

Материал из шейдера

      var vShader = document.getElementById("vshader").text;
      var fShader = document.getElementById("fshader").text;
      
        child.material = new THREE.ShaderMaterial({
           uniforms: {
              u_Sampler: {type: "t", value: Player.texture}
           },
           vertexShader: vShader,
           fragmentShader: fShader,
        });
      
    

Модель с текстурой

      Player.mesh.rotation.z += 0.01;
    

Создание сферы

      geometry = new THREE.SphereGeometry(100, 50, 50);
      material = new THREE.MeshPhongMaterial({map: texture});
      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    

Текстура сферы

Земной шар

      mesh.material.wireframe = false;
    

Полезные ссылки

• learningwebgl.com
• webglacademy.com
• davidscottlyons.com/threejs
• Книга WebGL. Программирование трехмерной графики
• Никита Северинов diductio.ru/course/2060/

Исходники

github.com/Likita

Демо