Question

То, чего я хочу добиться:

Для тестирования стиля игры, о котором я подумал, я хочу визуализировать трехмерный мир в форме пиксель-арта.Так, например, возьмем сцену, подобную этой (но отрисованную с определенной раскраской / стилем, чтобы она выглядела хорошо после пикселизации):

И сделайте этоВыглядит примерно так:

Играя различными способами стилизации 3D-источника, я думаю, что пиксельный вывод может выглядеть хорошо.Конечно, чтобы получить этот эффект, нужно просто уменьшить размер изображения до ~ 80p и увеличить его до 1080p с повторной дискретизацией ближайшего соседа.Но для начала более эффективно выполнять рендеринг прямо на холст 80p и просто выполнять масштабирование.

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

Мой код:

Мой буфер для растрового изображения хранится в мажорной строке, как r1, g1, b1, a1, r2, g2, b2, a2...и я использую gpu.js , который по сути превращает этот JS-функционал в шейдер.Моя цель - взять одно растровое изображение и вернуть его в большем масштабе с масштабированием ближайшего соседа, чтобы каждый пиксель становился квадратом 2х2 или 3х3 и так далее.Предположим, что inputBuffer - это масштабированная доля размера вывода, определенного методом setOutput.

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
  var y = Math.floor((this.thread.x / (width[0] * 4)) / scale[0]);
  var x = Math.floor((this.thread.x % (width[0] * 4)) / scale[0]);
  var remainder = this.thread.x % 4;
  return inputBuffer[(x * y) + remainder]; 
}).setOutput([width * height * 4]);

JSFiddle

Имейте в виду, что этоперебирая новый буфер вывода полного размера, поэтому мне нужно найти правильные координаты, которые будут существовать в меньшем sourceBuffer, основываясь на текущем индексе в outputBuffer (индекс предоставляется библиотекой как this.thread.x).

Что происходит вместо этого:

Это, вместо того, чтобы сделать ближайшего соседа высококлассным, создает симпатичную маленькую радугу (вверху - маленький нормальный рендер, ниже - результатшейдер, а справа вы можете увидеть некоторые записи отладки со статистикой о входном и выходном буферах:

Что я делаю не так?

Примечание: Я задал связанный с этим вопрос здесь, Существует ли более простой (и все еще эффективный) способ масштабирования рендера холста с повторной выборкой ближайшего соседа?

Tarun Lalwani · Answer 1 · 25 мая 2018

Обновление 1 - 25 мая 2018 года

Мне удалось решить большинство проблем.Их было довольно много

Логика преобразования была неправильной, и данные почему-то переворачивались, поэтому я перевернул столбцы и строки, чтобы начать с нижнего правого

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
var size = width[0] * height[0] * 4;
var current_index = Math.floor((size - this.thread.x)/4); 
var row = Math.floor(current_index / (width[0] * scale[0]) );
var col = Math.floor((current_index % width[0])/scale[0]);
var index_old = Math.floor(row * (width[0] / scale[0])) + width[0] - col;
var remainder = this.thread.x % 4;
return inputBuffer[index_old * 4 + remainder];

}).setOutput([width * height * 4]);

Вы использовали ширину и высоту в поплавках, которые я изменил, чтобы сначала вычислить, а затем масштабировать

var smallWidth = Math.floor(window.innerWidth / scale);
var smallHeight = Math.floor(window.innerHeight / scale);

var width = smallWidth * scale;
var height = smallHeight * scale;


var rt = new THREE.WebGLRenderTarget(smallWidth, smallHeight);
var frameBuffer = new Uint8Array(smallHeight * smallHeight * 4);
var outputBuffer = new Uint8ClampedArray(width * height * 4);

Размер холста был установленчтобы в то время как внутренняя ширина и высота, вам нужно установить только ширину и высоту изображения
```
context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
```

Ниже приведен окончательный JSFiddle для того же

https://jsfiddle.net/are5Lbw8/6/

Результаты:

Итоговый код для справки

var container;
var camera, scene, renderer;
var mouseX = 0;
var mouseY = 0;
var scale = 4;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var smallWidth = Math.floor(window.innerWidth / scale);
var smallHeight = Math.floor(window.innerHeight / scale);

var width = smallWidth * scale;
var height = smallHeight * scale;


var rt = new THREE.WebGLRenderTarget(smallWidth, smallHeight);
var frameBuffer = new Uint8Array(smallHeight * smallHeight * 4);
var outputBuffer = new Uint8ClampedArray(width * height * 4);
var output;
var divisor = 2;
var divisorHalf = divisor / 2;
var negativeDivisorHalf = -1 * divisorHalf;
var canvas;
var context;
var gpu = new GPU();

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
/*   var y = Math.floor((this.thread.x / (width[0] * 4)) / scale[0]);
  var x = Math.floor((this.thread.x % (width[0] * 4)) / scale[0]);
  var remainder = this.thread.x % 4;
  return inputBuffer[(x * y) + remainder];
   */
   var size = width[0] * height[0] * 4;
   var current_index = Math.floor((size - this.thread.x)/4); 
   var row = Math.floor(current_index / (width[0] * scale[0]) );
   var col = Math.floor((current_index % width[0])/scale[0]);
   var index_old = Math.floor(row * (width[0] / scale[0])) + width[0] - col;
   var remainder = this.thread.x % 4;
   return inputBuffer[index_old * 4 + remainder];

}).setOutput([width * height * 4]);
console.log(window.innerWidth);
console.log(window.innerHeight);
init();
animate();

function init() {
  container = document.createElement('div');
  document.body.appendChild(container);
  canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  context = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
  camera.position.z = 100;

  // scene
  scene = new THREE.Scene();
  var ambient = new THREE.AmbientLight(0xbbbbbb);
  scene.add(ambient);
  var directionalLight = new THREE.DirectionalLight(0xdddddd);
  directionalLight.position.set(0, 0, 1);
  scene.add(directionalLight);

  // texture
  var manager = new THREE.LoadingManager();
  manager.onProgress = function(item, loaded, total) {
    console.log(item, loaded, total);
  };
  var texture = new THREE.Texture();
  var onProgress = function(xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 100;
      console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
  };
  var onError = function(xhr) {};
  var imgLoader = new THREE.ImageLoader(manager);
  imgLoader.load('https://i.imgur.com/P6158Su.jpg', function(image) {
    texture.image = image;
    texture.needsUpdate = true;
  });

  // model
  var objLoader = new THREE.OBJLoader(manager);
  objLoader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/286022/Bulbasaur.obj', function(object) {
    object.traverse(function(child) {
      if (child instanceof THREE.Mesh) {
        child.material.map = texture;
      }
    });
    object.scale.x = 45;
    object.scale.y = 45;
    object.scale.z = 45;
    object.rotation.y = 3;
    object.position.y = -10.5;
    scene.add(object);
  }, onProgress, onError);
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: false
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(smallWidth, smallHeight);
  container.appendChild(renderer.domElement);
  renderer.context.webkitImageSmoothingEnabled = false;
  renderer.context.mozImageSmoothingEnabled = false;
  renderer.context.imageSmoothingEnabled = false;
  document.addEventListener('mousemove', onDocumentMouseMove, false);
  window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
  windowHalfX = (window.innerWidth / 2) / scale;
  windowHalfY = (window.innerHeight / 2) / scale;
  camera.aspect = (window.innerWidth / window.innerHeight) / scale;
  camera.updateProjectionMatrix();
  renderer.setSize(smallWidth, smallHeight);
}

function onDocumentMouseMove(event) {

  mouseX = (event.clientX - windowHalfX) / scale;
  mouseY = (event.clientY - windowHalfY) / scale;

}

function animate() {
  requestAnimationFrame(animate);
  render();
}

var flag = 0;

function render() {
  camera.position.x += (mouseX - camera.position.x) * .05;
  camera.position.y += (-mouseY - camera.position.y) * .05;
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
  renderer.render(scene, camera, rt);
  renderer.readRenderTargetPixels(rt, 0, 0, smallWidth, smallHeight, frameBuffer);
  //console.time('gpu');
  console.log(frameBuffer, [width], [height], [scale]);
  var outputBufferRaw = pixelateMatrix(frameBuffer, [width], [height], [scale]);
  //console.timeEnd('gpu');
  if (flag < 15) {
    console.log('source', frameBuffer);
    console.log('output', outputBufferRaw);

    var count = 0;
    for (let i = 0; i < frameBuffer.length; i++) {
      if (frameBuffer[i] != 0) {
        count++;
      }
    }
    console.log('source buffer length', frameBuffer.length)
    console.log('source non zero', count);

    var count = 0;
    for (let i = 0; i < outputBufferRaw.length; i++) {
      if (outputBufferRaw[i] != 0) {
        count++;
      }
    }
    console.log('output buffer length', outputBufferRaw.length)
    console.log('output non zero', count);
  }
  outputBuffer = new Uint8ClampedArray(outputBufferRaw);
  output = new ImageData(outputBuffer, width, height);
  context.putImageData(output, 0, 0);
  flag++;
}

Оригинальный ответ

Я подошел близко, но осталось два вопроса

Изображение переворачивается
Иногда ваш размер inputBuffer не кратен 4, чтозаставляет его плохо себя вести.

Ниже приведен код, который я использовал

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
   var current_index = Math.floor(this.thread.x/4); 
   var row = Math.floor(current_index / (width[0] * scale[0]) );
   var col = Math.floor((current_index % width[0])/scale[0]);
   var index_old = Math.floor(row * (width[0] / scale[0])) + col;
   var remainder = this.thread.x % 4;
   return inputBuffer[index_old * 4 + remainder];

}).setOutput([width * height * 4]);

Ниже находится JSFiddle

https://jsfiddle.net/are5Lbw8/

А ниже - токовый выход

john doe · Answer 2 · 31 мая 2018

Окончательный ответ

Ответ Таруна помог мне найти окончательное решение, поэтому его награда была вполне заслуженной, но я действительно узнал о функции (графический вывод в сочетании с совместным использованием контекста для прямого вывода буфера на цель рендеринга)) файла gpu.js, который позволяет примерно в 30 раз ускорить рендеринг, увеличив общее время затенения и рендеринга с 30 мс + до ~ 1 мс, и это без дополнительной оптимизации, которую теперь я знаю, можно отправитьбуфер массива для графического процессора еще быстрее, но у меня просто не было мотивации снизить время затенения / рендеринга ниже 1 мс.

var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);
var gl = canvas.getContext('webgl');
var gpu = new GPU({
  canvas,
  gl
});
var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, scale, size, purity, div) {
    var subX = Math.floor(this.thread.x / scale[0]);
    var subY = Math.floor(this.thread.y / scale[0]);
    var subIndex = ((subX * 4) + (subY * width[0] * 4));
    var rIndex = subIndex;
    var gIndex = subIndex + 1;
    var bIndex = subIndex + 2;
    var r = ((inputBuffer[rIndex] * purity[0]) + inputBuffer[rIndex - 4] + inputBuffer[rIndex + 4]) / (div[0]);
    var g = ((inputBuffer[gIndex] * purity[0]) + inputBuffer[gIndex - 4] + inputBuffer[gIndex + 4]) / (div[0]);
    var b = ((inputBuffer[bIndex] * purity[0]) + inputBuffer[bIndex - 4] + inputBuffer[bIndex + 4]) / (div[0]);
    this.color(r / 255, g / 255, b / 255);
  }).setOutput([width, height]).setGraphical(true);

inputBuffer - это просто буфер, извлекаемый с помощью three.js's *Метод 1009 *.

renderer.render(scene, camera, rt);
renderer.readRenderTargetPixels(rt, 0, 0, smallWidth, smallHeight, frameBuffer);
pixelateMatrix(frameBuffer, [smallWidth], [scale], [size], [purity], [div]);

Примечание

Можем ли мы на мгновение удивиться тому, как много WebGL дает браузеру?Это 8,2944 миллиона многофункциональных задач, выполненных всего за ~ 1 мс.По моим подсчетам, ~ 64 млрд. Максимальных математических операций в секунду для моего шейдера.Это безумие.Может ли это быть даже правильно?Моя математика ошибается в этом? Я вижу, что искусственный интеллект nvidia выполняет 24 триллиона операций в секунду , поэтому я предполагаю, что эти цифры на моем 1060 находятся в пределах возможного.Это просто невероятно.

GPU.js делает просто фантастическую работу по оптимизации матричных операций для запуска на GPU без необходимости изучения шейдерного кода, а создатель чрезвычайно активен в проекте, обычно реагируя на проблемыв считанные часы.Очень рекомендую, ребята, попробуйте lib.Особенно хороша для машинного обучения.

Sean F · Answer 3 · 24 мая 2018

Я думаю, что функция должна выглядеть следующим образом:

var pixelateMatrix = gpu.createKernel(function(inputBuffer, width, height, scale) {
    var x = Math.floor((this.thread.x / (width[0] * 4)) / scale[0]);
    var y = Math.floor((this.thread.x % (width[0] * 4)) / scale[0]);
    var finalval = y * (Math.floor(width[0]/scale[0]) * 4) + (x * 4);
    var remainder = this.thread.x % 4;
    return inputBuffer[finalval + remainder];
}).setOutput([width * height * 4]);

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

Как я могу правильно написать эту функцию шейдера в JS?

То, чего я хочу добиться:

Мой код:

Что происходит вместо этого:

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Окончательный ответ

Примечание

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как я могу правильно написать эту функцию шейдера в JS?

То, чего я хочу добиться:

Мой код:

Что происходит вместо этого:

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Окончательный ответ

Примечание

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов