Задать вопрос
Ответы пользователя по тегу WebGL
  • Как сделать два canvas для одной сцены в three.js?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Точно такая же сцена требуется в другом месте, и не хотелось бы дублировать код и создавать ту же сцену для другого канвас

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

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

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

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Стандартной функции 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;
    Ответ написан
    1 комментарий
  • Отличается ли GLSL в WebGL и OpenGL?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    В браузерах есть два варианта WebGL - это WebGL 1 и WebGL 2. В суровой реальности мы можем это округлить до только WebGL 1, т.к. вторая версия все еще не имеет адекватной поддержки браузерами, как на мобильных устройствах, так и на десктопах (в Safari это все еще "экспериментальная фича", да и в остальных браузерах такое впечатление, что только в прошлом году начали фиксить накопившиеся баги и странности). И получается, что в нашем распоряжении из действительно надежных вариантов есть только WebGL 1, где язык GLSL так и остается версии 1.0, в то время как весь мир OpenGL уже ушел до версии 4+ (это уже более свежая версия, чем будет по планам у нас в браузерах, когда появится полноценная поддержка WebGL 2 везде). Так что я бы не стал говорить о полной совместимости реально современного OpenGL и "современного" WebGL.
    Ответ написан
    Комментировать
  • Что за потеря контекста webgl и с чем её едят?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Пытаюсь создать рисовалку на webgl2

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

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

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

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

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

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:
    Спойлер
    1ersu-v8gwpy6mxqyagwggfny0k.png

    Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

    P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.
    Ответ написан
    1 комментарий
  • Какую 3д библиотеку лучше использовать для WEB?

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