WebGL - есть ли альтернатива встраиванию шейдеров в HTML? - PullRequest
Новая
       46

WebGL - есть ли альтернатива встраиванию шейдеров в HTML?

30 голосов
/ 04 мая 2011

Популярный способ использования шейдеров GLSL в WebGL, по-видимому, заключается в том, чтобы встраивать их в основной HTML-файл.Вершинные и фрагментные шейдеры встроены в такие теги, как: 

<script id="shader-fs" type="x-shader/x-fragment">

Это то же соглашение, которое я вижу в примерах WebGL на странице Mozilla Developer Network.

Это отлично работает для простых приложений, но если у вас сложное приложение с несколькими шейдерами, HTML-файл загромождается.(Я продолжаю редактировать неправильный шейдер!) Также, если вы хотите повторно использовать ваши шейдеры, эта схема неудобна.

Поэтому я думал о том, чтобы поместить эти шейдеры в отдельные файлы XML и загрузить их с помощью XMLHttpRequest ().Затем я увидел, что у кого-то еще есть такая же идея:

http://webreflection.blogspot.com/2010/09/fragment-and-vertex-shaders-my-way-to.html

Мне нравится предложение использовать файлы .c, поскольку это дает вам подсветку синтаксиса и другие удобства редактора для GLSL.

Но проблема с вышеуказанным подходом заключается в том, что (насколько я понимаю) XMLHttpRequest () не может загрузить локальный файл .c - т.е. на стороне клиента - пока вы разрабатываете и тестируете приложение WebGL.Но во время этого процесса загружать его на сервер сложно.

Так что, если я хочу, чтобы шейдеры не попадали в html-файл, является ли единственной возможностью встроить их в код в виде строк?Но это затруднит написание и отладку ...

Буду признателен за любые предложения по управлению несколькими шейдерами GLSL в приложениях WebGL.

С уважением

Редактировать (05 мая 2011 г.)

Поскольку я использую Mac для разработки, я решил включить сервер Apache и поставить свой webglкод под http://localhost/~username/. Это обходит проблему с файлом: протокол отключен во время разработки.Теперь код загрузки файла javascript работает локально, поскольку используется http: вместо file :.Просто подумал, что я это здесь выложу на случай, если кто-нибудь найдет это полезным.

Ответы [ 11 ]

0 голосов
/ 10 декабря 2013

Я также использовал Require.js для организации своих файлов, но вместо того, чтобы использовать текстовый плагин, как предлагает @Vlr, у меня есть скрипт, который берет шейдеры и конвертирует его в модуль Require.js, который я могу затем используйте в другом месте. Итак, файл шейдера, simple.frag вот так: 

uniform vec3 uColor;

void main() {
  gl_FragColor = vec4(uColor, 1.0);
}

Будет преобразован в файл shader.js: 

define( [], function() {
  return {
    fragment: {
      simple: [
        "uniform vec3 uColor;",

        "void main() {",
        "  gl_FragColor = vec4(uColor, 1.0);",
        "}",
      ].join("\n"),
    },
  }
} );

Что выглядит грязно, но идея не в том, что он удобочитаем. Затем, если я хочу использовать этот шейдер где-нибудь, я просто вытягиваю модуль shader и получаю к нему доступ, используя shader.fragment.simple, например: 

var simple = new THREE.ShaderMaterial( {
  vertexShader: shader.vertex.simple,
  fragmentShader: shader.fragment.simple
} );

Я написал сообщение в блоге с более подробной информацией и ссылками на демонстрационный код здесь: http://www.pheelicks.com/2013/12/webgl-working-with-glsl-source-files/

Страница:
...