Динамическое изменение цвета фона с помощью JavaScript - PullRequest
Новая
       0

Динамическое изменение цвета фона с помощью JavaScript

0 голосов
/ 13 мая 2018

Я хочу изучить WebGL и разрабатываю проект.

enter image description here

Цифры изменяют мое входное значение.Я написал этот код.Но я хочу изменить цвет цифр с помощью ползунка красно-зеленого размытия. 

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

precision mediump float;

float myred = 1.0, mygreen = 0.0, myblue = 0.0;
myred = 
void main()
{   
    gl_FragColor = vec4(myred, mygreen, myblue, 1.0 );
}
</script>

Код моего фрагмент-шейдера и 

<div>
            R: 0<input id="redSlider" type="range" min="0" max="1" step="0.1" value="1" oninput=redChange(this.value)/>1</div> 
            <div>
            G: 0<input id="greenSlider" type="range" min="0" max="1" step="0.1" value="0" onChange="greensliderChange(this.value)"/>1</div> 
            <div>
            B: 0<input id="blueSlider" type="range" min="0" max="1" step="0.1" value="0" onChange="changeColor(this.value, 2);"/>1</div>
            <br>

Это кодирует мою HTML-страницу.

Моя страница JavaScript, которую я добавляю для значения слайдера.Но я не могу изменить значение фрагмента-шейдера.Как изменить значение в значении HTML на странице JavaScript? 

    document.getElementById("redSlider").oninput = function(event) {
//red value
            alert(redSlider);
        };
        document.getElementById("greenSlider").oninput = function(event) {
//green value
        };
        document.getElementById("blueSlider").oninput = function(event) {
//blue value
        };

1 Ответ

0 голосов
/ 13 мая 2018

Иногда ответы трудно найти.Я только что просмотрел около 15 страниц по «диапазону ввода», и ни одна из них не показала пример того, как его использовать.Итак, я понимаю, почему трудно найти пример, и я также вижу, что, к сожалению, хотя я собираюсь предоставить пример ниже, он не будет найден, потому что этот вопрос не о «диапазоне ввода»

В любом случае, первое, что вам нужно знать, это как использовать <input type="range">.Вам нужно добавить прослушиватель событий для прослушивания события 'input' .Новое значение будет в атрибуте ползунка value.

const redSlider = document.querySelector("#redSlider");
redSlider.addEventListener('input', updateRed);

function updateRed {
  console.log(redSlider.value);
}
<input id="redSlider" type="range" min="0" max="1" step="0.1" value="1">

Далее, взглянув на свой пример, вы хотели показать значение слева от каждого ползунка.Для этого мы должны обновить это значение в HTML.Я считаю, что проще всего сделать элемент для этого.Я буду использовать <span> и установить для его свойства textContent значение ползунка. 

const redSlider = document.querySelector("#redSlider");
const redValueElem = document.querySelector("#redValue");
redSlider.addEventListener('input', updateRed);

function updateRed() {
  redValueElem.textContent = redSlider.value;
};
<div>
R: <span id="redValue"></span>
<input id="redSlider" type="range" min="0" max="1" step="0.1" value="1">
</div>

Проблема теперь в том, что, поскольку значение меняет ширину, например «0», оно не так широко, как «0,5», тип ввода = «диапазон»элемент перемещается.Чтобы это исправить, нам нужно добавить немного CSS, чтобы придать элементу значения фиксированную ширину 

const redSlider = document.querySelector("#redSlider");
const redValueElem = document.querySelector("#redValue");
redSlider.addEventListener('input', updateRed);

function updateRed() {
  redValueElem.textContent = redSlider.value;
};
.slider>span {
  /* because span defaults to inline it can't have a width */
  display: inline-block;  
  width: 2em;
}
<div class="slider">
R: <span id="redValue"></span>
<input id="redSlider" type="range" min="0" max="1" step="0.1" value="1">
</div>

Итак, теперь вы должны иметь возможность заставить работать 3 ползунка.

Далее, чтобы можно было передавать значенияв шейдер вы должны передать их как uniforms

precision mediump float;

uniform float myred;
uniform float mygreen;
uniform float myblue;

void main()
{   
    gl_FragColor = vec4(myred, mygreen, myblue, 1.0 );
}

Затем вам нужно будет найти расположение этих униформ, установить для них нужный цвет и затем вызвать функцию рисования.

Объяснение использования WebGL - очень большая тема.Я бы посоветовал вам прочитать эти учебные пособия .

Я также подумал, что должен упомянуть, что вам, вероятно, лучше отредактировать цвет в виде массива значений. 

const myColor = [1, 0, 0];

Это облегчит написание кода для повторного использования.Также было бы проще передать его в WebGL 

uniform vec3 mycolor;

...

  gl_FragColor = vec4(myColor, 1);


function setupRGBSliders(id, color, callback) {
  const ranges = document.querySelectorAll(id + ' input');
  const values = document.querySelectorAll(id + ' span');
  ranges.forEach((rangeElem, ndx) => {
    rangeElem.addEventListener('input', () => {
       const value = rangeElem.value;
       color[ndx] = value;
       update();
       callback();
    });
  });
  
  function update() {
    ranges.forEach((rangeElem, ndx) => {
      rangeElem.value = color[ndx];
      values[ndx].textContent = color[ndx];
    });
  }
  
  update();
  
  return update;
}
  
const myColor = [1, 0.5, 0.3];
setupRGBSliders('#mycolor', myColor, render);

const vs = `
void main() {
  gl_Position = vec4(0, 0, 0, 1);
  gl_PointSize = 100.0;
}
`;

const fs = `
precision mediump float;
uniform vec3 mycolor;
void main() {
  gl_FragColor = vec4(mycolor, 1);
}
`;

const gl = document.querySelector("canvas").getContext("webgl");
const program = twgl.createProgram(gl, [vs, fs]);  // using a helper because too much code
const mycolorLoc = gl.getUniformLocation(program, "mycolor");

render();

function render() {
  gl.useProgram(program);
  gl.uniform3fv(mycolorLoc, myColor);
  const offset = 0;
  const count = 1;
  gl.drawArrays(gl.POINTS, offset, count);
}
.rgb span {
  display: inline-block;  
  width: 2em;
}
<div id="mycolor" class="rgb">
  <div>
    R: <span></span>
    <input type="range" min="0" max="1" step="0.1" value="1">
  </div>
  <div>
    G: <span></span>
    <input type="range" min="0" max="1" step="0.1" value="1">
  </div>
  <div>
    B: <span></span>
    <input type="range" min="0" max="1" step="0.1" value="1">
  </div>
</div>
<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
...