Вопросы с меткой [webgl]
WebGL расширяет возможности элемента canvas в HTML5, позволяя отображать 3D графику в любом совместимом веб-браузере. НЕ СТАВЬТЕ ЭТУ МЕТКУ НА ВОПРОСЫ О 3D БИБЛИОТЕКАХ (например, THREE.js), если вопрос не связан конкретно с WebGL API.
122
вопроса
3
голоса
2ответа
78 показов
Как нарисовать и анимировать Деда Мороза?
Меня заинтересовала конкурсная работа участника @OPTIMUS PRIME, где он нарисовал и анимировал Деда Мороза с помощью элемента canvas.
Вот его конкурсный ответ в теме Новогодний конкурс 2021 года!:
"...
-1
голос
0ответов
24 показа
браузер в WebGL Unity
Возможно я что-то упускаю ,но мне нужен браузер в моей сборке webgl,с поддержкой ввода, у кого-то есть подходящий репозиторий? И в догонку: если я установлю директиву UNITY_ANDROID , смогу ли я ...
0
голосов
0ответов
25 показов
Как правильно подключить шейдер в webGL
Я создаю webGL и пытаюсь добавить в него шейдер по примеру. webGL создаётся, но шейдер в нём не выводится. Как это правильно сделать? Вот мой код:
index.html:
<!DOCTYPE html>
<html lang="...
2
голоса
1ответ
13 показов
Three.js, пользовательский шейдер, залить png текстурой и установить прозрачность?
Стоит задача, необходимо изменить цвет текстуры с преобладанием красного. Я пытаюсь делать так, но у меня текстура полностью заливает картинку красным цветом, подскажите, пожалуйста, где ошибка?
//...
2
голоса
0ответов
46 показов
Canvas JS. Оптимальное рисование точек
Есть программа, в основе которой отрисовка разноцветных точек на экране:
function fullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
...
0
голосов
0ответов
14 показов
Меши в меш three js
Как мне засунуть несколько мешей(объектов) в один меш(контейнер), чтобы при деформации контейнера это отразилось на всех объектах? Каждый объект имеет свой материал и свою геометрию.
0
голосов
0ответов
17 показов
Расширить или обернуть объект получаемый canvas.getContext()
есть ли возможность получить объект с прототипом полученного контекста?
let webgl = canvas.getContext('webgl2', params) || canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', ...
2
голоса
1ответ
46 показов
Как оптимизировать сет в буферный массив?
Есть вопрос по оптимизации кода.
Цель понять как уменьшить объем кода в Example 1, без значительного уменьшения производительности.
Branchmark
Setup:
let data1={line:new Float32Array(50000)}
let ...
0
голосов
0ответов
20 показов
Как тиражировать только часть текстуры?
У меня есть изображение которое я использую как текстуру.
И я хочу повторить только часть этой текстуры.
Например, третий прямоугольник в первой строке от [0.5,0] до [0.75, 0.25]. (коричневый)
Есть ...
1
голос
1ответ
45 показов
Замена текстуры в three.js
Подскажите, пожалуйста. Пытаюсь разобраться как с помощью threejs можно получить в консоль все элементы загруженного объекта в формате GLTF, для последующей замены текстур по нажатию кнопки.
var scene,...
0
голосов
1ответ
57 показов
Как анимировать треугольники в PlaneBufferGeometry?
Как я могу анимировать или просто взаимодействовать с этими треугольниками: https://jsfiddle.net/t2bjzc8r/1/ ? Я планирую наложить текстуру - фотографию на PlaneBufferGeometry и разбить ее на эти ...
0
голосов
0ответов
16 показов
WebGl+Android (Unity)
Есть ли готовое решение или мысли по поводу вывода потока видео с камеры устройства на вэб форму, нужно ли для этого использовать плагин андроид или в есть обходные пути в Unity? Задача состоит в ...
0
голосов
0ответов
32 показа
CefSharp как изменить название видеокарты в WebGL
Пытался сменить вот так, но ничего не работает
CefSettings cfsettigns = new CefSettings();
cfsettigns.CefCommandLineArgs.Add("webgLenable-privileged-extensions", "1");
cfsettigns....
0
голосов
1ответ
138 показов
Unity 2020.1 WebGL не запускается билд
После билда виснет на 99% в браузере и выдает ошибку
Uncaught ReferenceError: unityFramework is not defined at HTMLScriptElement.script.onload (WebGL)
0
голосов
0ответов
106 показов
Ошибка в Unity WebGL билде при переходе к сцене
При нажатии на кнопку "Play" в главном меню для перехода к главной сцене в билде WebGL появляется ошибка. В редакторе и ПК-билде все в порядке, как и в билде без меню (только с игровой ...
0
голосов
0ответов
28 показов
Изображения с большим разрешением и текстуры
Почему я не могу установить изображение с большим разрешением в качестве текстуры?
Полагаю нужно что-то поменять вот тут:
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
gl....
0
голосов
0ответов
31 показ
Как сделать переключение моделей без подключения GUI?
Мне нужно чтобы осуществлялось переключение 3D моделей без подключения {GUI} dat.gui.js.
Т.е в данный момент модели переключаются в выпадающем списке select в GUI интерфейсе.
Нужно чтобы переключение ...
4
голоса
0ответов
53 показа
Искажение цвета в webgl
Cоздаю рисовалку.
Рисую на canvas с помощью webgl множество квадратов с маской и альфой.
При альфе > 0.1 проблема незаметна. Но стоит сделать альфу чуть меньше - появляется неприятное искажение ...
2
голоса
0ответов
30 показов
Истинный альфа-блендинг в webgl
По интернету гуляет стандартный способ
gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA
Или же
gl.ONE, gl.ONE_MINUS_SRC_ALPHA
для предумноженных изображений.
Он идеален для наложения прозрачных текстур на ...
4
голоса
1ответ
110 показов
webgl черный экран
Что я делаю не так? рабочий пример
function drawWebglCanvas(f, v, gl, image) {
function resizeGlAndCanvas(gl) {
resizeCanvas(gl);
const resizeFunc = () => {
resizeCanvas(gl)...
5
голосов
1ответ
125 показов
webgl обработка изображений, среднее между средним, правым и левым пикселем
Изучаю как обрабатывать изображения в webgl
Не понимаю что это значит
// среднее между средним, правым и левым пикселем
gl_FragColor = (
texture2D(u_image, v_texCoord) +
texture2D(u_image, ...
2
голоса
1ответ
47 показов
как рендерить статичное изображение webgl
При ресайзе я вызываю две функции : resizeCanvas и renderGl
resizeCanvas изменяет размер canvas, а renderGl рендерит изображение
Я не понимаю, что нужно писать когда заново перерисовываешь статичное ...
3
голоса
1ответ
177 показов
Как сделать эффект при движении мыши
Нужно сделать эффект при движении мыши как на этом сайте, помогите пожалуйста это реализовать для footer или подскажите в каком направлении искать. спасибо
1
голос
1ответ
42 показа
webgl не создаётся шейдер
Переписываю код с этого урока: ссылка
У меня не создаётся шейдер, не понимаю в чём проблема. Контекст webgl создаётся
function initwebgl(canvas) {
const context = canvas.getContext("webgl2") ||...
1
голос
0ответов
19 показов
Как подсвечивать синтаксис webgl в Sublime Text Windows 10
Собственно не найду чем подсвечивать синтаксис GLSL, webgl
0
голосов
1ответ
26 показов
Организация текстур, буферов и тд в WebGL
Я пишу свой лёгкий движок для игр на основе WebGL. Есть объекты геометрий, текстур и тд. Я хочу создавать их таким образом
new Geometry(...);
new Texture(...);
new Mesh(...);
а затем добавлять их на ...
5
голосов
1ответ
795 показов
Как нарисовать и анимировать символ (знак) российского рубля [закрыт]
У меня есть символ (знак) российского рубля: ₽ (₽)
Знак российского рубля представляет собой букву «Р», состоящую из двух элементов, с горизонтальной чертой. Как создать эффект ...
23
голоса
12ответов
2k показов
Как анимировать слово StackOverflow
У меня есть слово StackOverflow:
<h1>StackOverflow</h1>
Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой?
Я ...
11
голосов
2ответа
238 показов
Как нарисовать объемную картинку линиями и анимировать её?
Как нарисовать объемную картинку линиями и добавить легкую анимацию в виде, например, изменения расстояния между полосками, чтобы получить эффект "движения", типа оживить картинку?
2
голоса
1ответ
147 показов
Как воссоздать такую анимацию плавной смены изображений?
Есть анимация на первом экране сайт - https://travelshift.com/
Это готовая библиотека (если да не подскажите, какая)
Если самопис не подскажите, что почитать/посмотреть на эту тему.
0
голосов
0ответов
31 показ
как перевести проект с Verge 3D на Three.js
Есть проект сделанный на Verge 3D и нужно способ как его перевести на Three js кто нибудь знает как перевести?
28
голосов
6ответов
1k показов
Как создать анимированную иконку Stackoverflow
Ниже изображения иконок EnSO и RuSO :
Код иконки EnSO
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
<style>.st0{fill:#bcbbbb}.st1{fill:...
18
голосов
7ответов
426 показов
Анимированное солнце со спутником вращающимся по орбите
У меня задача анимировать солнце.
Нужно, чтобы были всполохи и небольшие лучики. Лучики должны гореть, как пламя и медленно вращаться.
Технологии могут быть любые: SVG, SMIL, JavaScript, CSS, Canvas, ...
2
голоса
1ответ
139 показов
Использование буфера трафарета (stencil buffer) в three.js
Пытаюсь создать сцену с применением буфера трафарета, но к сожалению, по его использованию слишком мало информации и примеров.
Планирую по центру каждой из сторон тэтраэдра вырезать круг или квадрат, ...
0
голосов
0ответов
19 показов
Растягиваются объекты вдали от центра
Имеется такой код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MDN Games: Three.js demo</title>
<style>
body { margin: 0; ...
4
голоса
3ответа
106 показов
THREE.JS: Соединить GLSL частицы
Есть облако произвольных GLSL частиц. Задача соединить ближайших соседей линиями. Очень желательно чтобы линии были тоже просчитаны в шейдере (скорее всего втором) и имели толщину в отличии от THREE....
0
голосов
0ответов
32 показа
Не выходит положить текстуру на модель
из книги WebGL: Up and Running
Запустил второй пример (все файлы на которые код ссылается перекинул в директорию в которой лежит html файл ):
<!DOCTYPE html>
<html>
<head>
<...
6
голосов
1ответ
396 показов
Круглый прогресс-бар с эффектом движения воды
Кто знает как можно реализовать такой круглый прогресс-бар с эффектом воды как в центральной части этого сайта https://asmobius.co.jp/
2
голоса
1ответ
92 показа
Как сделать прозрачный фон в шейдере?
Всем доброго времени суток, я только начинаю свой путь в webGL, threejs, fragment/vertex shader'ах и столкнулся с такой проблемой:
Есть картинка с прозрачным фоном, но когда я передаю её в шейдер, то ...
0
голосов
0ответов
69 показов
WebGL сильно грузит процессор. Проект на django, подключаю файл js в html 5 на страницу и компьютер начинает разрываться
'use strict';
const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
let config = {
TEXTURE_DOWNSAMPLE: 1,
...
1
голос
1ответ
77 показов
Как использовать SQLite в Unity WebGL? (Ошибка “UnityLoader.js:1144 To use dlopen, you need to use Emscripten's linking support”)
Я успешно использую SQLite3 в Unity3D для платформ Android, Windows и в редакторе Unity.
После компиляции под WebGL, при запуске в консоли браузера возникает ошибка:
UnityLoader.js:1144 To use ...
2
голоса
1ответ
64 показа
Qt WebEngineView: Проблема с длительной загрузкой WebGL проекта (экспортированного из Unity)
Возникла необходимость создания интерактивного просмотрщика 3D-моделей, который будет встраиваться в QML проект. Решено было пойти по такому пути - сам просмотрщик делать в Unity 2018 и оттуда ...
27
голосов
8ответов
780 показов
Самые короткие и простые способы генерации различных фракталов или других изображений
Я интересуюсь компьютерной графикой и хотел бы провести своего рода конкурс.
Я хотел бы узнать о новых (для себя) способах генерации различных фракталов или других изображений, полученных по ...
0
голосов
0ответов
40 показов
Как сохранить файл без возможности его подмены
Разработана виртуальная среда для выполнения комплекса лабораторных работ. Это веб-приложение созданное в Unity (webgl). Оно размещено на сайте курса. После выполнения работы, пользователь сохраняет ...
1
голос
1ответ
368 показов
Three.js Изменение текстуры
Как можно изменить текущую текстуру (установил программно) у 3d объекта, используя textureObjLoader?
textureObjLoader = new THREE.TextureLoader(),
map = textureObjLoader.load(`./models/${...
1
голос
1ответ
68 показов
Радуга на шейдере
Видел вакансию, где требуется делать эффекты для 3d. И например требовалось сделать радугу. Мне конечно ещё рано для такой работы. Я с шейдерами ещё плохо знаком, но кое что начинаю уже понимать, и ...
0
голосов
2ответа
138 показов
обработка нормали для шейдера
Вот например я хочу 3d модель загрузить в шейдеры. Я использую obj формат и в этом формате есть вершины, нормали и текстурные координаты. В шейдере вершины присваиваются gl_Position. Но как насчет ...
1
голос
2ответа
119 показов
Как получать кадры из компонента <video></video>?
Скажите, пожалуйста, как мне получать кадры с видео, используя тег <video></video>, чтобы их можно было обработать и вывести на канвас?
4
голоса
1ответ
215 показов
Для чего нужны фреймбуферы?
Для чего нужны фреймбуферы в opengl? Я может не точно задаю вопрос, но я и не понимаю как его задать. Я читаю книгу по opengl es 3. Там описано какие есть функции, но для чего использовать или когда ...
1
голос
1ответ
870 показов
Как обмануть WebGL в плане CORS: The image element contains cross-origin data, and may not be loaded
Я подменял png картинку на свою при помощи Requestly и поставил на сервере с картинкой заголовки, разрешающие корс:
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "...