Как подключить шейдеры в WebGL-приложениях?

#javascript #html5 #графика #webgl #glsl

В книге К. Мацуда, Р. Ли - WebGL. Программирование трехмерной графики везде используется
встроенные шейдеры. Как подключить шейдеры из файлов. Решение описанное в этой же книге
не заработало:


  XMLHttpRequest cannot load file:///D:/Development/WebGL/DrawPoint/DrawPointVertesShader.gls.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.loadShaderFile @ ShaderUtilities.js:12
  
  XMLHttpRequest cannot load file:///D:/Development/WebGL/DrawPoint/DrawPointFragmentShader.gls.
Cross origin requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.


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

Ответы

Ответ 1

Истоки Вашей проблемы в том, что с веб страниц, которые были открыты по протоколу
file:// не удается получить по этому-же протоколу ресурсы, которые лежат рядом на диске.
Эта возможность в браузерах отключена из соображений безопасности.



Однако, Вы совершенно не обязаны подключать шейдеры как отдельные файлы.

Вам необходимо лишь передать компилятору шейдеров их исходный код, в виде строк,
а как вы будете хранить и получать эти строки в том месте где она нужны - дело десятое.



Таким образом Вы можете создать одну html страницу с webgl приложением, которое будет
открываться локально и без веб-сервера. 


  Можно держать glsl код прямо в javascript секциях в виде строк:












Если используется любой любой из всевозможных современных бандлеров(вроде webpack),
которые упаковывают веб приложения в одну или несколько портянок js, вы можете держать
текст шейдера в отдельном файле. И импортировать его по месту использования, так появляется
какая никакая модульность в glsl.

Следующим шагом является модульность непосредственно внутри glsl кода, (чтобы не
копи-пастить по 300 раз в разных шейдерах один и тот же код) тут 2 пути: 
собственный велосипед или более серьезное решение, например вот glslify это уже готовое
решение и огромная экосистема всевозможных кусочков для шейдеров, построенная поверх npm

let glsl = require('glslify')

let shaderCode = glsl(`
  #pragma glslify: noise = require('glsl-noise/simplex/3d')
  precision mediump float;
  varying vec3 vpos;
  void main () {
      gl_FragColor = vec4(noise(vpos*25.0),1);
  }
`);





  На просторах интернета и во многих туториалах используют теги 










PS: фрактал, который тут рисуется нашел и рассказал о нем миру некто Kali в этом
топике с fractalforums