Огненное око на HTML5 Canvas

Разместил: Apocalypse
Опубликовано: 25 июня 2019

Соскучились по оку Саурона? Нет проблем - технология HTML5 Canvas может вернуть его к вам на сайт

Для начала посмотрите ДЕМО

Установка:

На страницах, где хотите увидеть этот эффект после тега body вставьте:

<canvas id="webgl" width="500" height="1758"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 a_position;
uniform mat4 u_modelViewMatrix;
uniform mat4 u_projectionMatrix;
void main() {
gl_Position = a_position;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision highp float;
precision highp int;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_noise;
// movement variables
vec3 movement = vec3(.0);
const int maxIterations = 256;
const float stopThreshold = 0.001;
const float stepScale = .5;
const float eps = 0.005;
struct Surface {
int object_id;
float distance;
vec3 position;
vec3 colour;
float ambient;
float spec;
};
// This function describes the world in distances from any given 3 dimensional point in space
float world(in vec3 position, inout int object_id) {
vec2 polar = vec2(length(position)*.1, atan(position.y, position.x)+u_time*.1);
float field = (sin(sin((polar.x+polar.y) * 10. + u_time * 5.) + polar.y * 5.)) * cos(polar.x + polar.y);
vec3 pos = floor(position * .5);
object_id = int(floor(pos.x + pos.y + pos.z));
// position = mod(position, 1.) - .5;
return 1.-length(position.xy)+field*sin(u_time+position.z)*.15*(sin(position.z * 0.9 + u_time*5.) * .5 + .5);
}
float world(in vec3 position) {
int dummy = 0;
return world(position, dummy);
}
vec3 getObjectColour(int object_id) {
float modid = mod(float(object_id), 5.);
if(modid == 0.) {
return vec3(.0, 0., 0.5);
} else if(modid == 1.) {
return vec3(.5, 0.5, 0.);
} else if(modid == 2.) {
return vec3(.5, 0.5, 0.5);
} else if(modid == 3.) {
return vec3(.0, 0.5, 0.5);
} else if(modid == 4.) {
return vec3(.0, 0.5, 0.);
}
return vec3(.5, 0., 0.);
}
Surface getSurface(int object_id, float rayDepth, vec3 sp) {
return Surface(
object_id, 
rayDepth, 
sp, 
getObjectColour(object_id), 
.5, 
200.);
}
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
// The raymarch loop
Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout float field, inout vec3 colour) {
float sceneDist = 1e4;
float rayDepth = start;
int object_id = 0;
for(int i = 0; i < maxIterations; i++) {
vec3 p = ro + rd * rayDepth;
sceneDist = world(p, object_id);
float weight = sqrt(1. / sceneDist);
weight *= weight;
float density = pow(sceneDist * weight, .1);
field += density;
colour += hsv2rgb(vec3(sceneDist, 1.-sceneDist, field*.015)) * density;
if(sceneDist < stopThreshold || rayDepth > end) {
break;
}
rayDepth += sceneDist * stepScale;
}
return getSurface(object_id, rayDepth, ro + rd * rayDepth);
}
// Calculated the normal of any given point in space. Intended to be cast from the point of a surface
vec3 calculate_normal(in vec3 position) {
vec3 grad = vec3(
world(vec3(position.x + eps, position.y, position.z)) - world(vec3(position.x - eps, position.y, position.z)),
world(vec3(position.x, position.y + eps, position.z)) - world(vec3(position.x, position.y - eps, position.z)),
world(vec3(position.x, position.y, position.z + eps)) - world(vec3(position.x, position.y, position.z - eps))
);
return normalize(grad);
}
vec3 path(float z) {
return vec3(0,0,0.);
}
void main() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
// movement
movement = path(u_time);
// Camera and look-at
vec3 cam = vec3(0,0,-2);
vec3 lookAt = vec3(0,0,0);
// add movement
lookAt += movement;
cam += movement;
// Unit vectors
vec3 forward = normalize(lookAt - cam);
vec3 right = normalize(vec3(forward.z, 0., -forward.x));
vec3 up = normalize(cross(forward, right));
// FOV
float FOV = .3+dot(uv.xy, uv.xy);
// Ray origin and ray direction
vec3 ro = cam;
vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
// Ray marching
const float clipNear = 0.;
const float clipFar = 32.;
float field = 0.;
vec3 colour = vec3(0.);
Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, field, colour);
gl_FragColor = vec4(vec3(colour*.01), 1.);
}
</script>
<script type="text/javascript" src="/js/wtc-gl.js"></script>
<script id="rendered-js">
console.clear();
const twodWebGL = new WTCGL.default(
document.querySelector('canvas#webgl'),
document.querySelector('script#vertexShader').textContent,
document.querySelector('script#fragmentShader').textContent);
twodWebGL.startTime = -10000 + Math.random() * 5000;
// twodWebGL.addUniform('xscale', WTCGL.TYPE_FLOAT, 0.5);
window.addEventListener('resize', () => {
twodWebGL.resize(window.innerWidth, window.innerHeight);
});
twodWebGL.resize(window.innerWidth, window.innerHeight);
twodWebGL.pxratio = window.devicePixelRatio;
// track mouse move
let mousepos = [0, 0];
const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
window.addEventListener('pointermove', e => {
let ratio = window.innerHeight / window.innerWidth;
if (window.innerHeight > window.innerWidth) {
mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
} else {
mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
}
twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
});
// Load all our textures. We only initiate the instance once all images are loaded.
const textures = [
{
name: 'noise',
url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
type: WTCGL.IMAGETYPE_TILE,
img: null }];
const loadImage = function (imageObject) {
let img = document.createElement('img');
img.crossOrigin = "anonymous";
return new Promise((resolve, reject) => {
img.addEventListener('load', e => {
imageObject.img = img;
resolve(imageObject);
});
img.addEventListener('error', e => {
reject(e);
});
img.src = imageObject.url;
});
};
const loadTextures = function (textures) {
return new Promise((resolve, reject) => {
const loadTexture = pointer => {
if (pointer >= textures.length || pointer > 10) {
resolve(textures);
return;
};
const imageObject = textures[pointer];
const p = loadImage(imageObject);
p.then(
result => {
twodWebGL.addTexture(result.name, result.type, result.img);
},
error => {
console.log('error', error);
}).finally(e => {
loadTexture(pointer + 1);
});
};
loadTexture(0);
});
};
loadTextures(textures).then(
result => {
twodWebGL.initTextures();
// twodWebGL.render();
twodWebGL.running = true;
},
error => {
console.log('error');
});
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

attribute vec4 a_position;

uniform mat4 u_modelViewMatrix;

uniform mat4 u_projectionMatrix;

void main() {

gl_Position = a_position;

}

</script>

precision highp float;

precision highp int;

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

uniform sampler2D u_noise;

// movement variables

vec3 movement = vec3(.0);

const int maxIterations = 256;

const float stopThreshold = 0.001;

const float stepScale = .5;

const float eps = 0.005;

struct Surface {

int object_id;

float distance;

vec3 position;

vec3 colour;

float ambient;

float spec;

};

// This function describes the world in distances from any given 3 dimensional point in space

float world(in vec3 position, inout int object_id) {

vec2 polar = vec2(length(position)*.1, atan(position.y, position.x)+u_time*.1);

float field = (sin(sin((polar.x+polar.y) * 10. + u_time * 5.) + polar.y * 5.)) * cos(polar.x + polar.y);

vec3 pos = floor(position * .5);

object_id = int(floor(pos.x + pos.y + pos.z));

// position = mod(position, 1.) - .5;

return 1.-length(position.xy)+field*sin(u_time+position.z)*.15*(sin(position.z * 0.9 + u_time*5.) * .5 + .5);

}

float world(in vec3 position) {

int dummy = 0;

return world(position, dummy);

}

vec3 getObjectColour(int object_id) {

float modid = mod(float(object_id), 5.);

if(modid == 0.) {

return vec3(.0, 0., 0.5);

} else if(modid == 1.) {

return vec3(.5, 0.5, 0.);

} else if(modid == 2.) {

return vec3(.5, 0.5, 0.5);

} else if(modid == 3.) {

return vec3(.0, 0.5, 0.5);

} else if(modid == 4.) {

return vec3(.0, 0.5, 0.);

}

return vec3(.5, 0., 0.);

}

Surface getSurface(int object_id, float rayDepth, vec3 sp) {

return Surface(

object_id,

rayDepth,

sp,

getObjectColour(object_id),

.5,

200.);

}

vec3 hsv2rgb(vec3 c) {

vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);

vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);

return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);

}

// The raymarch loop

Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout float field, inout vec3 colour) {

float sceneDist = 1e4;

float rayDepth = start;

int object_id = 0;

for(int i = 0; i < maxIterations; i++) {

vec3 p = ro + rd * rayDepth;

sceneDist = world(p, object_id);

float weight = sqrt(1. / sceneDist);

weight *= weight;

float density = pow(sceneDist * weight, .1);

field += density;

colour += hsv2rgb(vec3(sceneDist, 1.-sceneDist, field*.015)) * density;

if(sceneDist < stopThreshold || rayDepth > end) {

break;

}

rayDepth += sceneDist * stepScale;

}

return getSurface(object_id, rayDepth, ro + rd * rayDepth);

}

// Calculated the normal of any given point in space. Intended to be cast from the point of a surface

vec3 calculate_normal(in vec3 position) {

vec3 grad = vec3(

world(vec3(position.x + eps, position.y, position.z)) - world(vec3(position.x - eps, position.y, position.z)),

world(vec3(position.x, position.y + eps, position.z)) - world(vec3(position.x, position.y - eps, position.z)),

world(vec3(position.x, position.y, position.z + eps)) - world(vec3(position.x, position.y, position.z - eps))

);

return normalize(grad);

}

vec3 path(float z) {

return vec3(0,0,0.);

}

void main() {

vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

// movement

movement = path(u_time);

// Camera and look-at

vec3 cam = vec3(0,0,-2);

vec3 lookAt = vec3(0,0,0);

// add movement

lookAt += movement;

cam += movement;

// Unit vectors

vec3 forward = normalize(lookAt - cam);

vec3 right = normalize(vec3(forward.z, 0., -forward.x));

vec3 up = normalize(cross(forward, right));

// FOV

float FOV = .3+dot(uv.xy, uv.xy);

// Ray origin and ray direction

vec3 ro = cam;

vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);

// Ray marching

const float clipNear = 0.;

const float clipFar = 32.;

float field = 0.;

vec3 colour = vec3(0.);

Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, field, colour);

gl_FragColor = vec4(vec3(colour*.01), 1.);

}

</script>

console.clear();

const twodWebGL = new WTCGL.default(

document.querySelector('canvas#webgl'),

document.querySelector('script#vertexShader').textContent,

document.querySelector('script#fragmentShader').textContent);

twodWebGL.startTime = -10000 + Math.random() * 5000;

// twodWebGL.addUniform('xscale', WTCGL.TYPE_FLOAT, 0.5);

window.addEventListener('resize', () => {

twodWebGL.resize(window.innerWidth, window.innerHeight);

});

twodWebGL.resize(window.innerWidth, window.innerHeight);

twodWebGL.pxratio = window.devicePixelRatio;

// track mouse move

let mousepos = [0, 0];

const u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);

window.addEventListener('pointermove', e => {

let ratio = window.innerHeight / window.innerWidth;

if (window.innerHeight > window.innerWidth) {

mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;

mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;

} else {

mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;

mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;

}

twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);

});

// Load all our textures. We only initiate the instance once all images are loaded.

const textures = [

{

name: 'noise',

url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',

type: WTCGL.IMAGETYPE_TILE,

img: null }];

const loadImage = function (imageObject) {

let img = document.createElement('img');

img.crossOrigin = "anonymous";

return new Promise((resolve, reject) => {

img.addEventListener('load', e => {

imageObject.img = img;

resolve(imageObject);

});

img.addEventListener('error', e => {

reject(e);

});

img.src = imageObject.url;

});

};

const loadTextures = function (textures) {

return new Promise((resolve, reject) => {

const loadTexture = pointer => {

if (pointer >= textures.length || pointer > 10) {

resolve(textures);

return;

};

const imageObject = textures[pointer];

const p = loadImage(imageObject);

p.then(

result => {

twodWebGL.addTexture(result.name, result.type, result.img);

error => {

console.log('error', error);

}).finally(e => {

loadTexture(pointer + 1);

});

};

loadTexture(0);

});

};

loadTextures(textures).then(

result => {

twodWebGL.initTextures();

// twodWebGL.render();

twodWebGL.running = true;

error => {

console.log('error');

});

</script>

Осталось лишь залить JS файл из прикреплённого архива в папку js

Метки: Canvas HTML5 Взгляд Глаз Огонь Око Саурон Эффект

Apocalypse

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

Огненное око на HTML5 Canvas

Читайте также:

Посетители сайта

Панель управления

Июнь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Огненное око на HTML5 Canvas

Читайте также:

Анимированная страница 404 в стиле приключений на SVG + CSS3 + Javascript

Простые модальные окна с разными эффектами на CSS3, SVG и jQuery

Красивые эффекты на кнопках при наведении с использованием CSS3 и SVG

Посетители сайта

Панель управления