LINUX.ORG.RU

Как сделать шейдер для браузера из шейдера без цвета и плюсового

 ,


0

1

Есть два шейдера вот браузерный без цвета

var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec2 a_TexCoord;\n' +
  'varying vec2 v_TexCoord;\n' +
  'uniform mat4 u_ProjMatrix;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'void main() {\n' +
  '  gl_Position = u_ProjMatrix * u_ModelMatrix * a_Position;\n' +
  '  v_TexCoord = a_TexCoord;\n' +
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'uniform sampler2D u_Sampler;\n' +
  'varying vec2 v_TexCoord;\n' +
  'void main() {\n' +
  '  gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
  '}\n';
И плюсовый который бы надо использовать, но браузер не знает некоторые слова в нем
const GLchar* vertexShaderSource = "#version 330 core\n"
"layout(location = 0) in vec3 position;\n"
"layout(location = 1) in vec4 color;\n"
"layout(location = 2) in vec2 texCoord;\n"
"out vec4 ourColor;\n"
"out vec2 TexCoord;\n"
"uniform mat4 transform;\n"
"void main()\n"
"{\n"
"gl_Position = transform*vec4(position, 1.0f);\n"
"ourColor = color;\n"
"TexCoord = texCoord;\n"
"}\0";
const GLchar* fragmentShaderSource = "#version 330 core\n"
"in vec4 ourColor;\n"
"in vec2 TexCoord;\n"
"out vec4 color;\n"
"uniform sampler2D ourTexture;\n"
"void main()\n"
"{\n"
"color = texture(ourTexture, TexCoord);\n"
"}\0";
Надо бы привести его к виду браузерного, не знаю как. По сути изменился только массив со значениями, 3 координаты, 4 цвета и 2 текстурные P.S. Сейчас сделал такой вариант шейдеров - но ничего не рисуется.
var VSHADER_SOURCE =
  'attribute vec3 a_Position;\n' +
  'attribute vec2 a_TexCoord;\n' +
  'varying vec2 v_TexCoord;\n' +
  'uniform mat4 u_ProjMatrix;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'void main() {\n' +
  '  gl_Position = u_ProjMatrix * u_ModelMatrix * vec4(a_Position,1.0);\n' +
  '  v_TexCoord = a_TexCoord;\n' +
  '}\n';

// Fragment shader program
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'uniform sampler2D u_Sampler;\n' +
  'varying vec2 v_TexCoord;\n' +
  'void main() {\n' +
  '  gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
  '}\n';
Сам код целиком https://codepen.io/JetStorm2/pen/VwVbrrZ?editors=0011



Последнее исправление: bad_master (всего исправлений: 2)

Передать цвет из вершинного в пиксельный?

У тебя есть массив данных который ты передаёшь в вершинный шейдер, цвет, позиция, координаты. Эти данные вершинный шейлер получает кусочками так

atribute vec4 a_Color;

Если тебе этот же цвет нужно передать дальше в фрагментный то ты пишешь так

vertex

atribute vec4 a_Color;/*получаемые данные*/
varying  vec4 v_Color;/*данные которые можно передать даныльше по конвееру*/

main()
{
...
v_Color = a_Color;
...
}

Теперь в пиксельном шейдере ты эти данные можешь получить
pixel

varying  vec4 v_Color; /*Тоже самое объявление, заметь*/

main()
{
  ...
  gl_FragColor = v_Color;
  ...
}

При этом v_Color фигурирует только в шейдерах и всё.

varying это аналог in out которые его заменили.

  • atribute данные передающиеся из кода в шейдер в виде массива шейдер получает 1 значение за раз
  • uniform данные передающиеся в шейдер отдельно явно float,vec2/4,mat3/4
  • varying переменная объявляемая в vertex shader и могущая туда писать
  • varying переменная объявляемая в fragmest shader и могущая от туда читать то что записал vertex shader

И да у тебя в js коде копипаст бага (вероятно и ещё есть)

UDP: Ты уже отредактировал код по ссылке видимо, поменялось.

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от bad_master

Ну можно помножить на переданный цвет например.

'gl_FragColor = texture2D(u_Sampler, v_TexCoord) * v_Color;\n'

Меня походу переклинило, я увидел что ты в атрибуте вершнинного шейдера получаешь цвет и подумал что не знаешь как его передать в фрагментный…

Чёт часто меня по невнимательности не туда заносит :(

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от bad_master

Время позднее разбираться лень :( Вот пример «простой» https://developer.mozilla.org/en-US/play попробуй на его базе сделать. Там у тебя ломается ещё до самой работы шейдера.

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 1)
Ответ на: комментарий от bad_master

Начни сначала просто с заливки экрана 1 цветом. Когда заработает уже переходи к порту шейдера. Тупо поменяв layout на uniform и out/in на varying и всё.

FSIZE = buf.BYTES_PER_ELEMENT

Ща, гляну. Но я js непонимать

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от bad_master

У тебя массивы флоаты, а значит 1 элемент 4 байта. Типизироанные массивы нужно объявлять явно, а ты закомментировал Float32Array если расскомментировать то будет 4.

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от bad_master

Я спать :)

Может стоит сначала всё выкинуть, нарисовать квадратик как тут https://developer.mozilla.org/en-US/play а уже к этому прикрутить всё что ты хочешь дальше. А то вот так с ноги, сложна. Хоть и задача тривиальная по сути, но не тут то было…

Доброй ночи.

LINUX-ORG-RU ★★★★★
()
Ответ на: комментарий от bad_master

Я даже не притрагивался, только с огорода приполз. Нет сил даже думать.

А у тебя? Или ты не пытался? =)

LINUX-ORG-RU ★★★★★
()
Последнее исправление: LINUX-ORG-RU (всего исправлений: 1)
Ответ на: комментарий от LINUX-ORG-RU

Короче перелопатил код там были такие строчки gl.bindTexture(gl.GL_TEXTURE_2D,...) - а такого типа нет есть вот такой gl.bindTexture(gl.TEXTURE_2D,...) и еще gl.drawArrays(gl.GL_TRIANGLES,...) такого тоже нет есть такой gl.drawArrays(gl.TRIANGLES,...)

bad_master
() автор топика
Последнее исправление: bad_master (всего исправлений: 1)