babylon打造行云流水笔墨穿梭动画效果-html代码-BFW代码库

babylon打造行云流水笔墨穿梭动画效果

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
.info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 1em;
}
</style>

</head>
<body translate="no">

<canvas></canvas>


<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/babylon-min.js"></script>
<script >
"use strict";
var Engine = BABYLON.Engine,Scene = BABYLON.Scene,Effect = BABYLON.Effect,Vector2 = BABYLON.Vector2,DefaultRenderingPipeline = BABYLON.DefaultRenderingPipeline,ShaderMaterial = BABYLON.ShaderMaterial,ArcRotateCamera = BABYLON.ArcRotateCamera,Vector3 = BABYLON.Vector3,MeshBuilder = BABYLON.MeshBuilder;
var canvas = document.querySelector('canvas');
var engine = new Engine(canvas, true);
var scene = createScene(engine);
engine.runRenderLoop(function () {scene.render();});
addEventListener('resize', function () {engine.resize();});
// --- 
// Shader sources
// ---
Effect.ShadersStore["fooVertexShader"] = "\nattribute vec3 position;\nuniform mat4 worldViewProjection;\nattribute vec2 uv;\nvarying vec2 vUV;\nvoid main() {\n    vUV = uv;\n    gl_Position = worldViewProjection*vec4(position,1.0);\n}\n";
// apply to tube
Effect.ShadersStore['fooFragmentShader'] = "\nuniform vec2 u_resolution;\nuniform float u_time;\nvarying vec2 vUV;\n#define PI 3.1415\n\nmat3 translate(float tx, float ty) {\n    return mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, tx, ty, 1.0);\n}\n\nmat3 rotate(float a) {\n    return mat3(cos(a), -sin(a), 0.0, sin(a), cos(a), 0.0, 0.0, 0.0, 1.0);\n}\n\nfloat rand(vec2 xy) {\n    return fract(sin(\n        dot(xy, vec2(200.0, 100.0))\n    )*10000.0);\n}\n\nvoid main() {\n    vec2 st = vUV;\n    \n    st = (st * 2.0-1.0);\n\n    // Radius and Angle\n    float r = fract(length(st));\n    float a = atan(st.y, st.x) /PI * 0.5 + 0.5; // 0..1\n    a = 1.0-fract(a + 0.25    + r       + u_time*0.0005);\n    //  ^^^^^^^^^^^^^^^^^^    ^^spiral    ^^motion^^^^^\n    //  ^offset 90d then flip (=conic grad. from the north, cw) \n    \n    // No. of sectors\n    float nSector = 3.0;\n    float n = floor(a * nSector) / (nSector-1.0);     // step vals in [0..1]\n\n    // No. of slices per sector\n    float nSlice = 11.0;\n    float m = floor(r * nSlice) / (nSlice-1.0);       // step vals in [0..1]\n\n    // F.........完整代码请登录后点击上方下载按钮下载查看