Ответы пользователя по тегу WebGL
  • Как встроить WebGL в нужный канвас?

    Ni55aN
    @Ni55aN
    Никак, KGL библиотекой это не предусмотрено

    Можно попробовать сделать форк и опубликовать для себя (в git или npm), если повезет, но pull request автор примет быстро.

    Или попробовать хитрый трюк - перед инициализацией Kgl подменить document.body, но это может что-то сломать
    var origBody = document.body;
    document.body = yourTargetParent;
    const webgl = new Kgl...
    document.body = origBody;
    Ответ написан
  • Какую webgl библиотеку выбрать?

    Ni55aN
    @Ni55aN
    В three.js с освещенностью проблем никаких нет, важно какой материал используете. Не знаю как сейчас, но качество теней раньше было плохим )даже мягкие тени имели артефакты).

    Попробуйте Babylon.js, но для него может не быть каких-то лоадеров или конверторов, что уже есть в Three.js благодаря большому сообществу
    Ответ написан
    Комментировать
  • Почему большой Canvas с WebGL контекстом занимает много памяти?

    Ni55aN
    @Ni55aN Автор вопроса
    В WebGL по умолчанию включены буфер глубины, сглаживание и альфа канал, поэтому ест много памяти.

    Источник
    Ответ написан
    Комментировать
  • Получение изображения из WebGLTexture?

    Ni55aN
    @Ni55aN Автор вопроса
    Изначально был вопрос о получении текстуры из того, что было отрендерено. Как выход - рендерил в frame buffer. Из-за этого появилась другая проблема - нужно отрендеренное отобразить на canvas. Выход - рисовать текстуру (в которую рисуется из другого FBO) в дефолтный frame buffer.

    Разумеется, потом потребовалось копировать текстуру, так как нельзя ее использовать и рисовать в нее же.
    Source and destination textures of the draw are the same.


    Окей, нашел методы. Еще один фрейм буфер создавать не вариант, все таки много кода получится. Есть метод
    copyTexSubImage2D() - он копирует данные из текущего frame buffer в активную текстуру. То что нужно! Получается, что потребность в FBO сразу отпадает, так как можно получить текстуру из дефолтного буфера.

    var texture = gl.createTexture();
    
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, element.width, element.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 0, 0, element.width, element.height);
    Ответ написан
    Комментировать
  • Как преобразовать Uint8Array?

    Ni55aN
    @Ni55aN
    В общем случае для преобразования Uint8Array в Float32Array можно выполнить в 2 строки

    var uint8array = ...
    var point1 = new Float32Array(uint8array.buffer);


    где,к примеру, из 40 элементов (байтов) получится 10 элементов float (так как Float32 - занимает 32 бита == 4 байта)

    for(var i=0;i<uint8array.length;i+=32){  // перебираем элементы каждой записи (строки из последней табл.)
    
    var p1bytes = uint8array.subarray(i,i+12); // получаем данные для первой точки, 12 байт
    var p1 = new Float32Array(p1bytes.buffer); // получили 3 элемента float
    var p2bytes = uint8array.subarray(i+12,i+20);  // теперь следующие 8 байт
    var p2 = new Float32Array(p2bytes.buffer);  // 2 элемента
    
    // дальше идут массивы из элементов по 2 байта (short)
    
    var p3bytes =  uint8array.subarray(i+20,i+24);  
    var p3 = new Uint16Array(p1bytes.buffer);
    
    // и т.д.
    }
    Ответ написан
    Комментировать