Canvas 3D рисование с использованием 2D и 3D контекста

Question

Поскольку webgl / opengl не поддерживает рисование текста, можно ли рисовать трехмерный объект с использованием трехмерного контекста, а рисование текста с использованием двумерного контекста?

Answer 1

Нет, к сожалению, нет.

Спецификация HTML 5 говорит, что если вы вызываете getContext для элемента canvas, который уже находится в другом режиме контекста , и два контекста несовместимы, тогда возвращается null.

К сожалению, полотна "webgl" и "2d" несовместимы, и поэтому вы получите null:

var canvas = document.getElementById('my-canvas');
var webgl = canvas.getContext("webgl"); // Get a 3D webgl context, returns a context
var twod = canvas.getContext("2d"); // Get a 2D context, returns null

Answer 2

Как уже говорилось, вы не можете сделать это.

Однако вы можете положить один холст поверх другого и рисовать на них отдельно. Я делал это раньше, и это может сработать довольно хорошо.

Answer 3

Создайте текст как текстуру, используя Canvas 2D, затем визуализируйте его в 3D.См. здесь для учебника.