当前位置: 开发笔记 > 编程语言 > 正文

html5水墨效果,html5canvas水墨风格的云雾动画特效

作者：1輩孓莣8鋽 | 来源：互联网 | 2023-09-24 01:35

特效描述：html5canvas水墨风格云雾动画特效。html5canvas云雾动画、水墨云雾特效代码结构1.引入JS2.HTML代码GLSLtexturelessc

特效描述&＃xff1a;html5 canvas水墨风格云雾动画特效。html5 canvas云雾动画、水墨云雾特效

代码结构

1. 引入JS

2. HTML代码

// GLSL textureless classic 3D noise "cnoise",

// with an RSL-style periodic variant "pnoise".

// Author: Stefan Gustavson ([email protected])

// Version: 2011-10-11

// Many thanks to Ian McEwan of Ashima Arts for the

// ideas for permutation and gradient selection.

// Distributed under the MIT license. See LICENSE file.

// https://github.com/ashima/webgl-noise

vec3 mod289(vec3 x)

{

return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec4 mod289(vec4 x)

{

return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec4 permute(vec4 x)

{

return mod289(((x*34.0)&＃43;1.0)*x);

}

vec4 taylorInvSqrt(vec4 r)

{

return 1.79284291400159 - 0.85373472095314 * r;

}

vec3 fade(vec3 t) {

return t*t*t*(t*(t*6.0-15.0)&＃43;10.0);

}

// Classic Perlin noise

float cnoise(vec3 P)

{

vec3 Pi0 &＃61; floor(P); // Integer part for indexing

vec3 Pi1 &＃61; Pi0 &＃43; vec3(1.0); // Integer part &＃43; 1

Pi0 &＃61; mod289(Pi0);

Pi1 &＃61; mod289(Pi1);

vec3 Pf0 &＃61; fract(P); // Fractional part for interpolation

vec3 Pf1 &＃61; Pf0 - vec3(1.0); // Fractional part - 1.0

vec4 ix &＃61; vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);

vec4 iy &＃61; vec4(Pi0.yy, Pi1.yy);

vec4 iz0 &＃61; Pi0.zzzz;

vec4 iz1 &＃61; Pi1.zzzz;

vec4 ixy &＃61; permute(permute(ix) &＃43; iy);

vec4 ixy0 &＃61; permute(ixy &＃43; iz0);

vec4 ixy1 &＃61; permute(ixy &＃43; iz1);

vec4 gx0 &＃61; ixy0 * (1.0 / 7.0);

vec4 gy0 &＃61; fract(floor(gx0) * (1.0 / 7.0)) - 0.5;

gx0 &＃61; fract(gx0);

vec4 gz0 &＃61; vec4(0.5) - abs(gx0) - abs(gy0);

vec4 sz0 &＃61; step(gz0, vec4(0.0));

gx0 -&＃61; sz0 * (step(0.0, gx0) - 0.5);

gy0 -&＃61; sz0 * (step(0.0, gy0) - 0.5);

vec4 gx1 &＃61; ixy1 * (1.0 / 7.0);

vec4 gy1 &＃61; fract(floor(gx1) * (1.0 / 7.0)) - 0.5;

gx1 &＃61; fract(gx1);

vec4 gz1 &＃61; vec4(0.5) - abs(gx1) - abs(gy1);

vec4 sz1 &＃61; step(gz1, vec4(0.0));

gx1 -&＃61; sz1 * (step(0.0, gx1) - 0.5);

gy1 -&＃61; sz1 * (step(0.0, gy1) - 0.5);

vec3 g000 &＃61; vec3(gx0.x,gy0.x,gz0.x);

vec3 g100 &＃61; vec3(gx0.y,gy0.y,gz0.y);

vec3 g010 &＃61; vec3(gx0.z,gy0.z,gz0.z);

vec3 g110 &＃61; vec3(gx0.w,gy0.w,gz0.w);

vec3 g001 &＃61; vec3(gx1.x,gy1.x,gz1.x);

vec3 g101 &＃61; vec3(gx1.y,gy1.y,gz1.y);

vec3 g011 &＃61; vec3(gx1.z,gy1.z,gz1.z);

vec3 g111 &＃61; vec3(gx1.w,gy1.w,gz1.w);

vec4 norm0 &＃61; taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));

g000 *&＃61; norm0.x;

g010 *&＃61; norm0.y;

g100 *&＃61; norm0.z;

g110 *&＃61; norm0.w;

vec4 norm1 &＃61; taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));

g001 *&＃61; norm1.x;

g011 *&＃61; norm1.y;

g101 *&＃61; norm1.z;

g111 *&＃61; norm1.w;

float n000 &＃61; dot(g000, Pf0);

float n100 &＃61; dot(g100, vec3(Pf1.x, Pf0.yz));

float n010 &＃61; dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));

float n110 &＃61; dot(g110, vec3(Pf1.xy, Pf0.z));

float n001 &＃61; dot(g001, vec3(Pf0.xy, Pf1.z));

float n101 &＃61; dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));

float n011 &＃61; dot(g011, vec3(Pf0.x, Pf1.yz));

float n111 &＃61; dot(g111, Pf1);

vec3 fade_xyz &＃61; fade(Pf0);

vec4 n_z &＃61; mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);

vec2 n_yz &＃61; mix(n_z.xy, n_z.zw, fade_xyz.y);

float n_xyz &＃61; mix(n_yz.x, n_yz.y, fade_xyz.x);

return 2.2 * n_xyz;

}

// Classic Perlin noise, periodic variant

float pnoise(vec3 P, vec3 rep)

{

vec3 Pi0 &＃61; mod(floor(P), rep); // Integer part, modulo period

vec3 Pi1 &＃61; mod(Pi0 &＃43; vec3(1.0), rep); // Integer part &＃43; 1, mod period

Pi0 &＃61; mod289(Pi0);

Pi1 &＃61; mod289(Pi1);

vec3 Pf0 &＃61; fract(P); // Fractional part for interpolation

vec3 Pf1 &＃61; Pf0 - vec3(1.0); // Fractional part - 1.0

vec4 ix &＃61; vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);

vec4 iy &＃61; vec4(Pi0.yy, Pi1.yy);

vec4 iz0 &＃61; Pi0.zzzz;

vec4 iz1 &＃61; Pi1.zzzz;

vec4 ixy &＃61; permute(permute(ix) &＃43; iy);

vec4 ixy0 &＃61; permute(ixy &＃43; iz0);

vec4 ixy1 &＃61; permute(ixy &＃43; iz1);

vec4 gx0 &＃61; ixy0 * (1.0 / 7.0);

vec4 gy0 &＃61; fract(floor(gx0) * (1.0 / 7.0)) - 0.5;

gx0 &＃61; fract(gx0);

vec4 gz0 &＃61; vec4(0.5) - abs(gx0) - abs(gy0);

vec4 sz0 &＃61; step(gz0, vec4(0.0));

gx0 -&＃61; sz0 * (step(0.0, gx0) - 0.5);

gy0 -&＃61; sz0 * (step(0.0, gy0) - 0.5);

vec4 gx1 &＃61; ixy1 * (1.0 / 7.0);

vec4 gy1 &＃61; fract(floor(gx1) * (1.0 / 7.0)) - 0.5;

gx1 &＃61; fract(gx1);

vec4 gz1 &＃61; vec4(0.5) - abs(gx1) - abs(gy1);

vec4 sz1 &＃61; step(gz1, vec4(0.0));

gx1 -&＃61; sz1 * (step(0.0, gx1) - 0.5);

gy1 -&＃61; sz1 * (step(0.0, gy1) - 0.5);

vec3 g000 &＃61; vec3(gx0.x,gy0.x,gz0.x);

vec3 g100 &＃61; vec3(gx0.y,gy0.y,gz0.y);

vec3 g010 &＃61; vec3(gx0.z,gy0.z,gz0.z);

vec3 g110 &＃61; vec3(gx0.w,gy0.w,gz0.w);

vec3 g001 &＃61; vec3(gx1.x,gy1.x,gz1.x);

vec3 g101 &＃61; vec3(gx1.y,gy1.y,gz1.y);

vec3 g011 &＃61; vec3(gx1.z,gy1.z,gz1.z);

vec3 g111 &＃61; vec3(gx1.w,gy1.w,gz1.w);

vec4 norm0 &＃61; taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));

g000 *&＃61; norm0.x;

g010 *&＃61; norm0.y;

g100 *&＃61; norm0.z;

g110 *&＃61; norm0.w;

vec4 norm1 &＃61; taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));

g001 *&＃61; norm1.x;

g011 *&＃61; norm1.y;

g101 *&＃61; norm1.z;

g111 *&＃61; norm1.w;

float n000 &＃61; dot(g000, Pf0);

float n100 &＃61; dot(g100, vec3(Pf1.x, Pf0.yz));

float n010 &＃61; dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));

float n110 &＃61; dot(g110, vec3(Pf1.xy, Pf0.z));

float n001 &＃61; dot(g001, vec3(Pf0.xy, Pf1.z));

float n101 &＃61; dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));

float n011 &＃61; dot(g011, vec3(Pf0.x, Pf1.yz));

float n111 &＃61; dot(g111, Pf1);

vec3 fade_xyz &＃61; fade(Pf0);

vec4 n_z &＃61; mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);

vec2 n_yz &＃61; mix(n_z.xy, n_z.zw, fade_xyz.y);

float n_xyz &＃61; mix(n_yz.x, n_yz.y, fade_xyz.x);

return 2.2 * n_xyz;

}

float turbulence( vec3 p ) {

float w &＃61; 100.0;

float t &＃61; -.5;

for (float f &＃61; 1.0 ; f <&＃61; 10.0 ; f&＃43;&＃43; ){

float power &＃61; pow( 2.0, f );

t &＃43;&＃61; abs( pnoise( vec3( power * p ), vec3( 10.0, 10.0, 10.0 ) ) / power );

}

return t;

}

// START

uniform float time;

varying vec2 vUv;

varying vec3 vNormal;

varying vec3 newPosition;

varying float noise;

#define PHONG

varying vec3 vViewPosition;

#include

void main() {

#include

#ifndef FLAT_SHADED // Normal computed with derivatives when FLAT_SHADED

vNormal &＃61; normalize( transformedNormal );

#endif

#include

vViewPosition &＃61; - mvPosition.xyz;

#include

vUv &＃61; uv;

noise &＃61; turbulence( 0.0050 * position &＃43; normal * (sin(time/2.) * 2.2));

vec3 displacement &＃61; vec3( (position.x ) * noise , position.y * noise ,position.z );

newPosition &＃61; position &＃43; turbulence(position * normal * (time / 20.)) &＃43; displacement ;

gl_Position &＃61; projectionMatrix * modelViewMatrix * vec4( newPosition , 1.0 );

}

#define PHONG

// START

uniform vec3 diffuse;

uniform vec3 emissive;

uniform vec3 specular;

uniform float shininess;

uniform float opacity;

uniform float time;

varying vec2 vUv;

varying vec3 newPosition;

varying float noise;

#include

void main() {

#include

vec3 color &＃61; vec3( vUv * ( 1. - 2. * noise ), 1.0 );

vec4 finalColors &＃61; vec4( color.b * 1. ,color.g * 2. , color.b * 3. , 1.0 );

vec4 diffuseColor &＃61; vec4( finalColors );

ReflectedLight reflectedLight &＃61; ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );

vec3 totalEmissiveRadiance &＃61; emissive;

#include

// accumulation

#include

// modulation

#include

vec3 outgoingLight &＃61; reflectedLight.directDiffuse &＃43; reflectedLight.indirectDiffuse &＃43; reflectedLight.directSpecular &＃43; reflectedLight.indirectSpecular &＃43; totalEmissiveRadiance;

#include

gl_FragColor &＃61; vec4( outgoingLight, diffuseColor.a );

#include

}

// Shaders

var vertShader &＃61; document.querySelector(&＃39;#vertexshader&＃39;).innerHTML;

var fragShader &＃61; document.querySelector(&＃39;#fragmentshader&＃39;).innerHTML;

// Renderer

var renderer &＃61; new THREE.WebGLRenderer({canvas:document.getElementById(&＃39;main&＃39;),antialiasing:true});

renderer.setClearColor(0x000000);

renderer.setSize(window.innerWidth,window.innerHeight);

// Camera

var camera &＃61; new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 5000 );

camera.position.z &＃61; 100;

// Scene

var scene &＃61; new THREE.Scene();

// Light

var light &＃61; new THREE.DirectionalLight(0xffffff,0.3);

light.position.z &＃61; 200;

light.position.x &＃61; 100;

light.position.y &＃61; 100;

scene.add(light);

// Shader Materials

const uniforms &＃61; THREE.UniformsUtils.merge([

THREE.UniformsLib["ambient"],

THREE.UniformsLib["lights"],

{time: { type: "f", value: 0 }},

THREE.ShaderLib.phong.uniforms

]);

var material &＃61; new THREE.ShaderMaterial( {

uniforms:uniforms,

vertexShader : vertShader,

fragmentShader : fragShader,

lights:true

} );

var geometry &＃61; new THREE.SphereGeometry( 30,200,200);

var planet &＃61; new THREE.Mesh( geometry, material );

scene.add( planet );

planet.position.x &＃61; 0;

planet.position.y &＃61; 0;

planet.position.z &＃61; 0;

planet.modifier &＃61; Math.random();

planet.material.transparent &＃61; true;

planet.material.opacity &＃61; 1*Math.random();

// Render

var start &＃61; Date.now();

function render(){

uniforms.time.value &＃61; .00005 * ( Date.now() - start );

planet.rotation.y &＃61; 1;

planet.rotation.x &＃61; 1;

camera.position.x &＃61; 10;

camera.position.z &＃61; 42;

camera.rotation.z &＃61; -0.2;

renderer.render(scene,camera);

window.requestAnimationFrame(render);

}

window.requestAnimationFrame(render);

推荐阅读

jsp
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
jsp
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
get
Linux下Perl的安装及第一个程序运行

本文介绍了在Linux下安装Perl的步骤，并提供了一个简单的Perl程序示例。同时，还展示了运行该程序的结果。 ... [详细]

蜡笔小新 2023-12-13 18:29:11
python
lua语言闭包、模式匹配、日期、编译、模块的特性及应用

本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值，函数可以作为变量自由传递，也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性，为程序开发带来了便利。 ... [详细]

蜡笔小新 2023-12-14 18:18:21
get
Backwardsincompatible change made.

Commit1ced2a7433ea8937a1b260ea65d708f32ca7c95eintroduceda+Clonetraitboundtom ... [详细]

蜡笔小新 2023-12-14 15:35:09
jsp
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
ip
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
jsp
C#之数据集：DataSet对象的使用及相关方法详解

本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]

蜡笔小新 2023-12-14 12:09:13
get
Open judge C16H: Magical Balls 快速幂+逆元问题解析

本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]

蜡笔小新 2023-12-14 12:03:27
get
关于cuowu类的错误提示和使用AdjustmentListener的问题

本文讨论了一个关于cuowu类的问题，作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案，并给出了两个可能导致错误的原因。 ... [详细]

蜡笔小新 2023-12-13 22:09:56
jsp
Linux进程控制块PCBtask_struct结构体结构及作用详解

本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]

蜡笔小新 2023-12-13 21:31:18
jsp
Support Paged.JS for automatic hugo resume> PDF conversion.

FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]

蜡笔小新 2023-12-13 11:52:05
ip
Java学习笔记之面向对象编程（OOP）

本文介绍了Java学习笔记中的面向对象编程（OOP）内容，包括OOP的三大特性（封装、继承、多态）和五大原则（单一职责原则、开放封闭原则、里式替换原则、依赖倒置原则）。通过学习OOP，可以提高代码复用性、拓展性和安全性。 ... [详细]

蜡笔小新 2023-12-13 08:44:30
jsp
CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法

本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]

蜡笔小新 2023-12-12 18:18:49
get
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58

1輩孓莣8鋽

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章