Интерактивная 3D графика на WebGL

Василика Климова

Интерактивная
3D графика
на WebGL

Василика Климова
Разработчик интерфейсов
Artec Group

Artec Group

Содержание

2D

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

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

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

Имитация 3D

Инфографика

mrdoob.com/lab/javascript/threejs/css3d/periodictable

WebGL


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

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

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

Игры

gooengine.com/pearl-boy

Навигация

bookcase.chromeexperiments.com

Редакторы

3dtin.com

Инфографика

globe.chromeexperiments.com

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

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

&

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

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

WebGL

+ + GLSL ES

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

Точка

3D графика

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

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

Взаимосвязь

Взаимосвязь

Взаимосвязь

Взаимосвязь

Меш

Меш

Меш

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

threejs.org/examples/#webgl_particles_shapes

Three.js

three.min.js 420 kb
OBJLoader.js 8 kb
TrackballControls.js 14 kb
@mrdoob threejs.org

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

obj ply binary
babylon stl wrl
vrm dae (collada) ctm
utf8 svg pvr
vtk awd pdb

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

object.obj

Список вершин, с координатами (x,y,z) Текстурные координаты (u,v) Определения поверхности(v/vt)

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

texture.jpg

Алгоритм

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

Сцена

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

Типы камер

Перспективная проекция - PerspectiveCamera

Ортогональная проекция - OrthographicCamera

Объект Камера

        PerspectiveCamera( fov,  aspect,  near,  far )
      

Добавление камеры

      // PerspectiveCamera( fov,  aspect,  near,  far )
      var aspect = Player.size.width / Player.size.height;
      Player.camera = new THREE.PerspectiveCamera(45.0,
      aspect, 2, 8000);
      Player.camera.position.z = 300;
      Player.scene.add(Player.camera);
    

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

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

Свет

// Player.scene.add(light)
Player.scene.add(light)

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) {
      
      
    

Отрисовка

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

Вращение

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

requestAnimationFrame

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

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

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

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

Шейдеры

GLSL

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

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


Типы данных

Типы классификаторов

Описатели/Шейдеры Вершинный Фрагментный
attribute READ -
uniform READ READ
varying READ/WRITE READ

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

<Описатель> <Тип> <НазваниеПеременной>
varying vec2 vUv

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

      <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;
    

Преимущество библиотек

      child.material.map = Player.texture;
    

Каркасный режим

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

      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;
    

WebGL библиотеки

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

Исходники

github.com/Likita

Демо

Интерактивность

Геймификация

Василика Климова

likita
vasilika.klimova
lik04ka

Спасибо за внимание!

Fork me on Github