Artec 3D

• Artec 3D
• Shapify
• Viewshape

Shapify Booth

Содержание

• WebGL
• Язык шейдеров
• Фильтрация текстур
• Постобработка
• Частицы
• Отладка

Конструкторы

WebGL 1.0

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

Поддержка браузерами

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

WebGL

+

+

GLSL ES

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

Точка

GLSL

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

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

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

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

Типы данных

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

Матрица Модели-Вида-Проекции

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

      <script type="x-shader/x-vertex" id="vshader">  
        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="fshader">  
        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;
      
        object.material = new THREE.ShaderMaterial({
           uniforms: {
              u_Sampler: {type: "t", value: texture}
           },
           vertexShader: vShader,
           fragmentShader: fShader,
        });
      
    

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

Черно-белый фильтр

Фрагментный шейдер. ЧБ текстура

      <script type="x-shader/x-fragment" id="fshader">  
      uniform sampler2D u_Sampler;
      varying vec2 vUv;
      void main() {
        vec4 color = texture2D(u_Sampler, vUv);
        color.rgb = vec3(color.r + color.g + color.b)/3.0;
        gl_FragColor = color;
      }
        </script>
    

Сепия

      float tone = 0.299 * col.r + 0.587 * col.g + 0.114 * col.b;  
      col.r = (tone > (0.81)) ? 1.0 : tone + 0.19;
      col.g = (tone < (0.055)) ? 0.0 : tone - 0.055;
      col.b = (tone < (0.22)) ? 0.0 : tone - 0.22;
      gl_FragColor = col;
    

Сепия

Отрисовка

      renderer = new THREE.WebGLRenderer()
      animate();
      animate = function() {
         requestAnimationFrame(animate);
         renderer.render(scene, camera);
      }
    

Cartoon шейдер. Код

      HueLevels[0] = 0.0; 
      HueLevels[1] = 80.0;  
      HueLevels[2] = 160.0;
      HueLevels[3] = 240.0;
      HueLevels[4] = 320.0;
      HueLevels[5] = 360.0;
      if (color == "Hue")
        for (int i = 0; i<HueLevCount-1; i++)
          if (col >= HueLevels[i] && col <= HueLevels[i+1])
            return HueLevels[i+1];
    

Постобработка

      composer = new THREE.EffectComposer(renderer);
      composer.addPass( new THREE.RenderPass(scene, camera) );

      Toon = { uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
      };

      effect = new THREE.ShaderPass(Toon);
      effect.renderToScreen = true;
      composer.addPass(effect);
    

Отображение

        animate();
        animate: function() {
           requestAnimationFrame(animate);
           composer.render();
        }
    

Сравнение визуализации частиц

Частицы

      particleObj = new THREE.ParticleSystem(geometry, material); 
      particleObj.position.set(0, 50, 0);  
      particleObj.dynamic = true;
      particleObj.sortParticles = true;
      scene.add( particleObj );
    

Отладка

• Three.js Inspector
• WebGL-Inspector
• Mozilla Shader Editor

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

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

Недостатки

• Многополигональные сцены
• Требуется оптимизация
• Растровая графика

Практическое применение WebGL

• Визуализации растровой графики
• Редактирование и анализ изображений
• Фильтрация видео
• Интерактивая графика
• Игры
• Статистика в виде графиков

Курс WebGL

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

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

Презентация