P5JS Фильтруя шейдер, вызывая прозрачность графического объекта, чтобы стать черным ⇐ Javascript

[Anonymous]

Я пытаюсь имитировать, дующий ветром по растениям на эскизе P5JS и наткнулся на прекрасный фрагментный шейдер, который делает в значительной степени то, что я хочу (// https://github.com/gamemakerdiscord/wind-shader
). Черный, и, к сожалению, я не вижу точно, что было бы этим исправлением. Я играл с различными методами выброса , когда альфа равен 0, но не должен делать это правильно. Не очень хорошо имитируя траву, но хотел включить минимальный рабочий пример.

Код: Выделить всё

let gfx, gfx2;
let wind_fs;

function setup() {
createCanvas(500, 500);

gfx = createGraphics(width, height);
gfx2 = createGraphics(width, height);

for (let _ = 0; _ < 10; _++) {
gfx.fill(random(255));
gfx.circle(random(width), random(height), random(10, 50));
}

wind_fs = createFilterShader(wind_src);
}

function draw() {
background(220);
image(gfx, 0, 0);

wind_fs.setUniform("_time", millis() * 0.001);
filter(wind_fs);
}

// https://github.com/GameMakerDiscord/wind-shader
let wind_src = `precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform float _time;

void main() {

// Shift the texture coordinates
vec2 uv = vTexCoord;

vec2 Size = vec2(256, 128);
vec2 Wave = vec2(48, 5);

uv = vTexCoord + vec2(cos((uv.y / Wave.x + _time) * 6.2831) * Wave.y, 0) / Size * (1.0 - vTexCoord.y);

// Get the texture pixel color
vec3 pixel_color = texture2D(tex0, uv).rgb;

// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
`;< /code>
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}< /code>





[*]








< /code>
< /div>
< /div>
< /p>
Вот что я хотел бы сделать.  Я предполагаю, что для правильной обработки каждого отдельного завода (моделируемого зелеными прямолинейными словами, хотя я был бы фактическим растением к графическому объекту), что мне нужно будет применять шейдер индивидуально к каждому, чтобы его не странно исказить общую сцену.   Круги указывают на фон, который был бы привлечен к сцене, который я не хочу искажать.let gfx, gfx2;
let wind_fs;

function setup() {
createCanvas(500, 500);

gfx = createGraphics(width, height);
gfx2 = createGraphics(50, 100);

// the background
for (let _ = 0; _ < 10; _++) {
gfx.fill(random(255));
gfx.circle(random(width), random(height), random(10, 50));
}

// the grass
gfx2.fill(color(0,255,0));
gfx2.rect(15, 50, 10, 50);

wind_fs = gfx2.createFilterShader(wind_src);
}

function draw() {
background(220);
image(gfx, 0, 0);

for (let i = 0; i < 5; i++) {
wind_fs.setUniform("_time", millis() * 0.001);
gfx2.filter(wind_fs);
image(gfx2, gfx2.width * i *2, 20);
}
}

// https://github.com/GameMakerDiscord/wind-shader
let wind_src = `precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D tex0;
uniform float _time;

void main() {

// Shift the texture coordinates
vec2 uv = vTexCoord;

vec2 Size = vec2(256, 128);
vec2 Wave = vec2(48, 5);

uv = vTexCoord + vec2(cos((uv.y / Wave.x + _time) * 6.2831) * Wave.y, 0) / Size * (1.0 - vTexCoord.y);

// Get the texture pixel color
vec3 pixel_color = texture2D(tex0, uv).rgb;

// Fragment shader output
gl_FragColor = vec4(pixel_color, 1.0);
}
`;< /code>
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}< /code>
    

Вещи, которые я пробовал:

• Настройка setttribut Установите ноль (через https://gamedev.stackexchange.com/quest ... ck-instead)

Подробнее здесь: https://stackoverflow.com/questions/796 ... turn-black