Ivan Bogachev

Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас

Сцену дублировать не обязательно. WebGLRenderer не умеет рендерить в несколько мест одновременно, но можно иметь одну сцену и много рендереров, каждый из которых будет рендерить ее в свой канвас. Это работает.

Если посмотреть с другой стороны, то возможно, что вам не нужны два канваса. Это может звучать странно, но тем не менее. Пользователь же все равно видит только один экран информации. Можно иметь один канвас на весь экран, и в нем рендерить сцены в какие-то его участки. Там есть такой функционал у рендерера, называется "ножницы" (scissor). Его можно использовать как раз для таких задач. Есть хороший пример в документации.

Но если делать именно 100% дублирование, то оба этих варианта будут не самыми толковыми с точки зрения производительности. В лоб скопировать уже готовое содержимое канваса в другой через drawImage должно быть проще, чем рендерить всю сцену еще раз. Поэтому решение, которое пришло вам в голову - очень даже ничего в текущем контексте. Хотя и выглядит топорно.

Стандартной функции rand в glsl в нашем распоряжении нет. Есть популярная реализация:

float rand(vec2 seed) {
    return fract(sin(dot(seed, vec2(12.9898,78.233))) * 43758.5453123);
}

Ее копипастят годами из проекта в проект, и используют, когда нужно что-то нарандомить.

Но глобальные константы должны быть именно константами, известными на этапе компиляции. На попытку присвоить им значение, вычисленное в какой-то функции - получим ошибки компиляции. Исключения по этой части в glsl делаются только для специальных переменных, в частности для uniform. Они могут быть определены уже в реальном времени. Можно было бы нарандомить все в main, и потом передавать все значения в остальные функции в качестве параметров, но может быть быстрее и удобнее добавить больше uniform-переменных, вроде:

var tuniform = {
	SEA_SPEED: {
		type: 'f',
		value: Math.random() * 10.0
	},
	time: {
// ...

в JS, и в шейдере:

// Вместо
// const float SEA_SPEED = 0.8;
// используем
uniform float SEA_SPEED;

Пытаюсь создать рисовалку на webgl2

Стоит посмотреть на поддержку WebGL2 в Safari, осознать, что экспериментальная фича даже при "зеленой" поддержке не отличается стабильностью, и подумать еще раз пока не поздно. Но это так, к слову. Раз уж говорим про качество и надежность.

Что произойдёт с данными при потере контекста? ...потом восстанавливать его? ...старый контекст автоматически удалится или так и будет висеть в небытии?

По теме есть хорошая заметка из первых рук. Там есть ответы на ваши вопросы с подробностями и примерами кода.

Может вообще забить на эту потерю контекста? Как часто она происходит? Раз на миллион?

Происходит действительно редко. Я за все время экспериментов с WebGL не столкнулся ни разу. То есть такое впечатление, что скорее браузер намертво повесится, чем сбросит контекст. Нужна ли супер-надежность с обработкой этого редкого сценария в вашем конкретном случае - решать вам. Но в целом мало кто об этом заботится.

Из популярных вариантов еще можно посмотреть на three.js. Есть raycaster для определения наведения мыши на определенные объекты, вращение камеры вокруг точки делается в пару строк (или можно мышкой прикрутить через OrbitControls), c помощью CSS3DRenderer для этой библиотеки можно интегрировать сверстанные элементы интерфейса прямо в трехмерную сцену, что может быть довольно удобно в некоторых случаях.