1

Видел вакансию, где требуется делать эффекты для 3d. И например требовалось сделать радугу. Мне конечно ещё рано для такой работы. Я с шейдерами ещё плохо знаком, но кое что начинаю уже понимать, и блин как же классно. И вот я думаю. Что если радугу выводить с помощью текстуры, то так не получиться, потому что например в моих случаях для прямоугольной текстуры нужно всего 12 значений. Каждое значение это '1' потом другое значение '1'. Тогда в шейдере получиться так, что всего четыре раза выполниться фрагментный шейдер, который выводит цвет, и я не смогу выполнить постпроцессинг с градиентом цветов. Значит радугу надо рисовать GL_POINTS точками ( пикселями ), и наверное как то подсчитать точки, которые по окружности ближе, те и делать градиент. И потом ещё задействовать время, чтобы был эффект переливания цветов. Хотя у радуги нет переливания цвета. Значит картинка статична и немного прозрачна ( но прозрачность я думаю можно устроить ). Напишите, правильно ли я думаю о том как делать радугу? И как вы считаете правильным делать радугу?

2
  • Блин, вроде бы что-то я не так написал, фрагментный шейдер вызовется не четыре раза, а 12 / ( 2 * 3 ) два раза вызовется. Но блин,выходной цвет для текстуры это вектор из четырех компонент. Это значит что можно рисовать текстурами и делать постпроцессинг. Ведь так?
    – user302477
    20 апр 2019 в 19:34
  • 1
    все что угодно можно изобразить нарисовав один треугольник, закрывающий весь экран, чтобы вызвать фрагментный шейдер для всех пикселей, а внутри него все посчитать исходя из gl_FragCoord и переменных переданных в шейдер 20 апр 2019 в 21:29

1 ответ 1

1

Вот то, о чем я писал в комментариях, только на WebGL, времени тут нет, зато есть мышка

let canvas = document.querySelector('canvas');
let gl = canvas.getContext('webgl');
let pid = gl.createProgram();

shader(`
  attribute vec2 coords;
  void main(void) {
    gl_Position = vec4(coords.xy, 0.0, 1.0);
  }
`, gl.VERTEX_SHADER);

shader(`
  precision highp float; 
  uniform vec4 mr; // mouse and resolution 

  void main(void) {
    vec2 uv = gl_FragCoord.xy/mr.zw;
    vec2 center = mr.xy/mr.zw;
    float fr = 10.0 - mr.x/10.;
    float h = 0.16 + mr.y/20000.;
    float s = sin(uv.x * fr) * 0.02;
    vec4 rb = vec4(0.0);
    float c = 0.43;
    rb = mix(rb, vec4(1.0,0.0,0.0,1.0), step(c-3.0*h+s, uv.y) - step(c-2.0*h+s, uv.y));
    rb = mix(rb, vec4(1.0,0.6,0.0,1.0), step(c-2.0*h+s, uv.y) - step(c-1.0*h+s, uv.y));
    rb = mix(rb, vec4(1.0,1.0,0.0,1.0), step(c-1.0*h+s, uv.y) - step(c+0.0*h+s, uv.y));
    rb = mix(rb, vec4(0.2,1.0,0.0,1.0), step(c+0.0*h+s, uv.y) - step(c+1.0*h+s, uv.y));
    rb = mix(rb, vec4(0.0,0.6,1.0,1.0), step(c+1.0*h+s, uv.y) - step(c+2.0*h+s, uv.y));
    rb = mix(rb, vec4(0.1,0.2,1.0,1.0), step(c+2.0*h+s, uv.y) - step(c+3.0*h+s, uv.y));
    rb = mix(rb, vec4(0.4,0.2,1.0,1.0), step(c+3.0*h+s, uv.y) - step(c+4.0*h+s, uv.y));
    gl_FragColor = rb; 
  }
`, gl.FRAGMENT_SHADER);

gl.linkProgram(pid);
gl.useProgram(pid);

let array = new Float32Array([-1,  3, -1, -1, 3, -1]);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);

let coords = gl.getAttribLocation(pid, "coords");
gl.vertexAttribPointer(coords, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coords);

let mr = gl.getUniformLocation(pid, 'mr');

let x = 0, y = 0;
let changeCenter = e => {
  e = e.touches ? e.touches[0] : e;
  let z = window.getComputedStyle(canvas).zoom || 1;
  let d = document.documentElement;
  x = (e.clientX + d.scrollLeft - canvas.offsetLeft*z) / z;
  y = (e.clientY + d.scrollTop - canvas.offsetTop*z) / z
  draw();
}

window.addEventListener('mousemove', e => changeCenter(e));
window.addEventListener('touchmove', e => changeCenter(e));
window.addEventListener('resize', resize);

resize();

function draw() {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 0, 0, 0);
  gl.uniform4f(mr, x, y, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
}

function shader(src, type) {
  let sid = gl.createShader(type);
  gl.shaderSource(sid, src);
  gl.compileShader(sid);
  var message = gl.getShaderInfoLog(sid);
  gl.attachShader(pid, sid);
  if (message.length > 0) {
    console.log(src.split('\n').map(function (str, i) {
      return ("" + (1 + i)).padStart(4, "0") + ": " + str
    }).join('\n'));
    throw message;
  }
}

function resize(){
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  draw();
}
<body style="margin:0; overflow:hidden"><canvas/></body>

1
  • @xverizex спрашивайте по коду, я с удовольствием отвечу 20 апр 2019 в 22:26

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.