Функция Forge generateTexture ()

В следующем примере есть функция с именем generateTexture().

Можно ли нарисовать текст (числа) в массиве пикселей? Или можно нарисовать текст (числа) поверх этого шейдера?

Наша цель - нарисовать круг с числом внутри.

https://forge.autodesk.com/blog/using-dynamic-texture-inside-custom-shaders

ОБНОВЛЕНИЕ. Мы заметили, что каждый круг не может использовать уникальный generateTexture(). Результат generateTexture() используется каждым из них. Единственное, что можно настроить для каждого объекта, - это цвет и используемая текстура.

Мы могли бы создать обходной путь для этого, который должен генерировать каждую текстуру от 0 до 99, а затем каждый объект выбирает правильную текстуру на основе числа, которое мы хотим отобразить. Однако мы не знаем, будет ли это достаточно эффективным для правильной работы. В противном случае может потребоваться от 0 до 9+ или что-то в этом направлении. Будем очень признательны за любые руководства по нашему обновленному вопросу. Спасибо.


autodesk-forge autodesk-viewer
person Torbjorn    schedule 03.02.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я могу успешно отображать текст с помощью следующего кода, просто замените generateTexture () на generateCanvasTexture () в образец, и вы должны получить результат ниже:

const generateCanvasTexture = () => {

  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext('2d')

  ctx.font = '20pt Arial'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(new Date().toLocaleString(),
    canvas.width / 2, canvas.height / 2)

  const canvasTexture = new THREE.Texture(canvas)

  canvasTexture.needsUpdate = true
  canvasTexture.flipX = false
  canvasTexture.flipY = false

  return canvasTexture
}

введите здесь описание изображения

person Philippe    schedule 13.02.2018
comment
Спасибо еще раз. В ближайшие пару дней мы проведем небольшое тестирование. Похоже, мы приближаемся к решению. Цените помощь. - person Torbjorn; 14.02.2018
comment
И снова здравствуйте, Филипп. Все отлично сложилось. Спасибо за помощь. Однако есть один небольшой вопрос: по какой-то причине затенение или окружающая окклюзия идет поверх шейдеров разметки, что в редких случаях приводит к тому, что разметка остается в темноте. Пример со стула: oi65.tinypic.com/15x4w7.jpg Пример из нашего приложения: oi64.tinypic.com/jicpaa.jpg - person Torbjorn; 17.02.2018
comment
Не уверен, как их обойти ... вы пытались отключить окружающие тени и сглаживание в средстве просмотра (также можно сделать через API) - person Philippe; 19.02.2018

arrow_upward
0
arrow_downward

Это возможно, но вам нужно будет реализовать это самостоятельно. Шейдеры - это довольно низкоуровневая функция, поэтому нет возможности напрямую нарисовать число или текст, но вы можете преобразовать данный символ в его представление в виде массива 2d пикселей.

person Philippe    schedule 03.02.2018
comment
Спасибо. Мы проведем небольшое тестирование и нарисуем белый текст (от 0 до 9) поверх черного фона, затем мы сможем взять из него пиксельные данные и использовать их в шейдере. Мы посмотрим, найдем ли мы какую-либо программу, которая может помочь нам автоматически получить значения пикселей из изображения, иначе нам просто придется вручную измерить и записать каждое значение пикселя. - person Torbjorn; 04.02.2018
comment
Это может помочь: stackoverflow.com/questions/13963308/ - person Philippe; 05.02.2018
comment
Спасибо. Мы обновили наш вопрос. Не могли бы вы поделиться своим мнением по этому поводу? Большое спасибо. - person Torbjorn; 12.02.2018
comment
Здесь нет ограничений, в этом примере текстура является частью shader.uniforms, что означает, что она является общей для всех вершин, использующих этот шейдер. Если вам нужны разные текстуры для каждой вершины, вы можете либо использовать shader.attributes (которые имеют соответствие 1: 1 с вершинами, подобно цвету или pointSize), либо создать другой шейдер для каждой текстуры, но один объект в three.js может только затронут один материал, так что вы скорее в первом случае. - person Philippe; 12.02.2018
comment
Еще раз привет, мы попытались сделать то, что вы предложили, но, к сожалению, безуспешно. По-видимому, иметь в качестве атрибута sampler2D (текстуру) недопустимый код шейдера, он должен быть однородным. См. msdn.microsoft.com/en-us/ie/ dn611835 (v = vs.94) в Недействительном квалификаторе в объявлении переменной сэмплера - должен быть унифицированным. Также см. Это: stackoverflow.com/questions/46553165/. Не могли бы вы поделиться с нами своим мнением? - person Torbjorn; 12.02.2018
comment
Добавляем наш интерес. Мы также экспериментируем с пользовательскими разметками. - person Mykita; 13.02.2018
comment
Вы можете использовать массив sampler2D как единый, как в этом вопросе: stackoverflow.com/questions/26579109/ - person Philippe; 13.02.2018
comment
Мне также приходит в голову, что вы можете визуализировать двумерный холст в текстуре, это даст вам мощный способ визуализации текста или более сложных двумерных фигур в шейдерах без необходимости самостоятельно реализовывать сложную логику. Посмотрите эту демонстрацию: stemkoski.github.io/Three.js/Texture- From-Canvas.html или этот npmjs.com/package/threejs-texture -инструмент - person Philippe; 13.02.2018
comment
Спасибо - мы попробуем вариант холста. - person Torbjorn; 13.02.2018