Неоновая волна на HTML5

Разместил: Apocalypse
Опубликовано: 17 сентября 2015

Интересный пример на HTML5, который покажет, как реализовать интересный эффект неоновой волны Для начала посмотрите ДЕМО Моё тестирование в фидле КЛИК Установка: В то место, где будет неоновая волна, вставьте:

<canvas></canvas>
<script id="sv" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(void) {
gl_Position = vPosition;
}
</script>
<script id="sf" type="x-shader/x-fragment">
precision mediump float;
uniform float time;
uniform vec2 resolution;
void main(void) {
vec2 q = gl_FragCoord.xy / resolution.xy;
vec2 p = -1.0 + 2.0 * q;
p.x *= resolution.x / resolution.y;

float v = p.x + cos(time + p.y);
vec3 col = vec3(0.1 * max(0.0, p.y), 0.1 * max(0.0, p.x), 0.2 * max(0.0, p.x)) / abs(v * 2.0);
gl_FragColor = vec4(col, 1.0);
}
</script>

<script>
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ut, st = Date.now();

function initShaders(gl, vertexShaderId, fragmentShaderId) {
var vertexEl = document.querySelector(vertexShaderId);
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexEl.text);
gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
debugger
}

var fragmentEl = document.querySelector(fragmentShaderId);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentEl.text);
gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
debugger
}

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
return program;
}

function initGraphics() {
gl = canvas.getContext('webgl');
var width = canvas.width;
var height = canvas.height;
gl.viewport(0, 0, width, height);
var program = initShaders(gl, '#sv', '#sf');
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, 'vPosition');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
ut = gl.getUniformLocation(program, 'time');
var resolution = new Float32Array([canvas.width, canvas.height]);
gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution);
}

function render() {
gl.uniform1f(ut, (Date.now() - st) / 1000);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
requestAnimationFrame(render);
}

initGraphics();
render();
</script>

attribute vec4 vPosition;

void main(void) {

gl_Position = vPosition;

}

</script>

precision mediump float;

uniform float time;

uniform vec2 resolution;

void main(void) {

vec2 q = gl_FragCoord.xy / resolution.xy;

vec2 p = -1.0 + 2.0 * q;

p.x *= resolution.x / resolution.y;

float v = p.x + cos(time + p.y);

vec3 col = vec3(0.1 * max(0.0, p.y), 0.1 * max(0.0, p.x), 0.2 * max(0.0, p.x)) / abs(v * 2.0);

gl_FragColor = vec4(col, 1.0);

}

</script>

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var ut, st = Date.now();

function initShaders(gl, vertexShaderId, fragmentShaderId) {

var vertexEl = document.querySelector(vertexShaderId);

var vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexEl.text);

gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {

debugger

}

var fragmentEl = document.querySelector(fragmentShaderId);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentEl.text);

gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {

debugger

}

var program = gl.createProgram();

gl.attachShader(program, vertexShader);

gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

gl.useProgram(program);

return program;

}

function initGraphics() {

gl = canvas.getContext('webgl');

var width = canvas.width;

var height = canvas.height;

gl.viewport(0, 0, width, height);

var program = initShaders(gl, '#sv', '#sf');

var buffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

gl.bufferData(

gl.ARRAY_BUFFER,

new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),

gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation(program, 'vPosition');

gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);

gl.enableVertexAttribArray(vPosition);

ut = gl.getUniformLocation(program, 'time');

var resolution = new Float32Array([canvas.width, canvas.height]);

gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution);

}

function render() {

gl.uniform1f(ut, (Date.now() - st) / 1000);

gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

requestAnimationFrame(render);

}

initGraphics();

render();

</script>

Автор публикации

не в сети 7 дней

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: HTML5 Волна Неоновая

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

1 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Гость

fomir

9 лет назад

Чтобы в качестве фона страницы поставить - вставляем сразу после < body >

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться