Фильтрация реальности с помощью JavaScript и Google Cardboard

 canvas

Затем мы создаем плоскость Three.js, на которую будем помещать наш канал, используя context = canvas.getContext('2d');
texture = new THREE.Texture(canvas);
texture.context = context; Я установил его на 1920 × 1280 в качестве базового размера для нашего видео.

 THREE.PlaneGeometry

Затем мы создаем объект var cameraPlane = new THREE.PlaneGeometry(1920, 1280); Мы THREE.Mesh-600 Если у вас есть видео канал другого размера, вам может потребоваться отрегулировать положение z, чтобы форма заполняла область просмотра.

 cameraMesh = new THREE.Mesh(cameraPlane, new THREE.MeshBasicMaterial({
      color: 0xffffff, opacity: 1, map: texture
    }));
    cameraMesh.position.z = -600;

    scene.add(cameraMesh);
  }

После этого у нас есть функция обратного вызова с ошибкой, которая запустит console.log

 function streamError(error) {
    console.log('Stream error: ', error);
  }

В конце нашей функции init()animate() Вот где мы будем обрабатывать видеоизображение:

 animate();

Применение фильтров

Наша функция animate()context.drawImage()

 function animate() {
    if (context) {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

Оттуда мы можем прочитать наш холст, используя context.getImageData() Приведенный ниже код начинается с настроек нашего черно-белого фильтра, который считывает наши данные, получает общую яркость каждого пикселя изображения и затем фильтрует каждый пиксель как черный, серый или белый в зависимости от масштаба яркости, который он содержит. , Это дает ощущение мультипликации / старого стиля газеты к изображению.

 if (themes[currentTheme] == 'blackandwhite') {
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        for (var i = 0; i < data.length; i+=4) {
          var red = data[i],
              green = data[i+1],
              blue = data[i+2],
              luminance = ((red * 299) + (green * 587) + (blue * 114)) / 1000; // Gives a value from 0 - 255
          if (luminance > 175) {
            red = 255;
            green = 255;
            blue = 255;
          } else if (luminance >= 100 && luminance <= 175) {
            red = 190;
            green = 190;
            blue = 190;
          } else if (luminance < 100) {
            red = 0;
            green = 0;
            blue = 0;
          }

          data[i] = red;
          data[i+1] = green;
          data[i+2] = blue;
        }

        imageData.data = data;

        context.putImageData(imageData, 0, 0);
      }

Это выглядит так:

Следующая тема инвертирует наши пиксели, поэтому белый цвет черный и так далее. Это дает рентгеновский стиль изображения:

 else if (themes[currentTheme] == 'inverse') {
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        for (var i = 0; i < data.length; i+=4) {
          var red = 255 - data[i],
              green = 255 - data[i+1],
              blue = 255 - data[i+2];

          data[i] = red;
          data[i+1] = green;
          data[i+2] = blue;
        }

        imageData.data = data;

        context.putImageData(imageData, 0, 0);
      }

Это выглядит так:

Наша тема сепии использует формулу, которую я видел в различных местах в Интернете, чтобы придать изображению эффект сепии, цвета старой школы. Я также добавляю шум к изображению, добавляя случайный уровень красного, зеленого и синего к каждому пикселю. Если пиксели через сепию будут иметь более высокий уровень цвета, чем 255, я ограничу его 255.

 else if (themes[currentTheme] == 'sepia') {
        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

        for (var i = 0; i < data.length; i+=4) {
          var red = data[i],
              green = data[i+1],
              blue = data[i+2];
              
          var sepiaRed = (red * 0.393) + (green * 0.769) + (blue * 0.189);
          var sepiaGreen = (red * 0.349) + (green * 0.686) + (blue * 0.168);
          var sepiaBlue = (red * 0.272) + (green * 0.534) + (blue * 0.131);

          var randomNoise = Math.random() * 50;

          sepiaRed += randomNoise;
          sepiaGreen += randomNoise;
          sepiaBlue += randomNoise;

          sepiaRed = sepiaRed > 255 ? 255 : sepiaRed;
          sepiaGreen = sepiaGreen > 255 ? 255 : sepiaGreen;
          sepiaBlue = sepiaBlue > 255 ? 255 : sepiaBlue;

          data[i] = sepiaRed;
          data[i+1] = sepiaGreen;
          data[i+2] = sepiaBlue;
        }

        imageData.data = data;

        context.putImageData(imageData, 0, 0);
      }

Это выглядит так:

Наконец, мой любимый из всех эффектов! Стиль «аркада», который пикселирует изображение, чтобы оно выглядело как ретро мир. Чтобы добиться этого эффекта, я настроил плагин Close Pixelate от David DeSandro и John Schulz. Исходная версия плагина преобразует встроенное изображение и заменяет его пиксельной версией холста. Моя версия вместо этого берет данные холста и помещает их обратно в тот же холст и контекст, чтобы мы могли использовать их для живого видео. Моя настроенная версия по-прежнему принимает все те же параметры, что и на их странице плагина . Он немного медленнее, чем другие фильтры выше, и его можно было бы оптимизировать, если бы у меня было время изучить его. На данный момент, я в порядке с небольшим отставанием, заставляет это чувствовать себя более ретро! Примечание для тех, кто хочет применить новые параметры в этом фильтре (например, вместо этого превращая мир в алмазы) — он может заставить его отставать еще больше!

 else if (themes[currentTheme] == 'arcade') {
        ClosePixelation(canvas, context, [
          {
            resolution: 6
          }
        ]);
      }

Это выглядит так:

Наконец, мы устанавливаем текстуру для обновления в следующем кадре для Three.js (как мы определенно изменили ее каким-то образом) и снова запускаем animate()requestAnimationFrame() Мы также запускаем код для обновления и перерисовки нашей сцены Three.js.

 if (video.readyState === video.HAVE_ENOUGH_DATA) {
        texture.needsUpdate = true;
      }
    }

    requestAnimationFrame(animate);

    update();
    render();
  }

Время HTTPS

Обновление от конца 2015 года — я возвращаюсь к этой статье, чтобы добавить новую довольно важную информацию — Chrome теперь требует, чтобы веб-страницы, использующие камеру, обслуживались по HTTPS. Поэтому, прежде чем пытаться выполнить это, вам нужно найти способ запустить свой сервис через HTTPS. Один из методов, которые я использовал для тестирования, — это ngrok, который может предоставить HTTPS-туннель вашему локальному хосту. У нас есть руководство по доступу к Localhost From Anywhere здесь, на SitePoint, которое поможет вам начать работу.

В бою

Чтобы получить доступ к веб-камере и всем остальным, вам нужно разместить ее на сервере, а не запускать ее локально. Для тестирования я использовал ngrok для тестирования с моего Mac на моем телефоне. Если вы новичок в идее настройки службы, такой как ngrok, у меня есть статья на SitePoint о том, как это сделать, в Accessing Localhost From Anywhere . В противном случае, отправьте ваши вещи на веб-сервер и протестируйте их!

Запустите его в своем Google Cardboard или другой гарнитуре VR, и вы должны увидеть окружающую среду с нашим черно-белым фильтром для начала. Если вы посмотрите на землю, она должна поменять фильтры. Это очень весело! Вот небольшой анимированный GIF-файл, чтобы показать его в действии (за пределами гарнитуры, чтобы вы могли видеть, что он отображает):

Вывод

Объединяя возможности Google Cardboard, HTML5, JavaScript и Three.js, вы получаете действительно замечательные возможности, которые не ограничиваются только виртуальной реальностью. Используя вход камеры, вы также можете перенести мир вокруг себя на сцену! Есть много других областей, в которых эта первоначальная идея может быть развита. Также возможно фильтровать изображение через сам Three.js с помощью шейдеров и добавлять объекты дополненной реальности на вашу сцену — две идеи, о которых я расскажу в следующих статьях.

Если вы сделаете действительно хороший AR опыт, основываясь на этой демонстрации, оставьте заметку в комментариях или свяжитесь со мной в Twitter ( @thatpatrickguy ), я всегда очень хочу посмотреть!