vexr twgl实现数据扭曲canvas动画效果代码-html代码-BFW代码库

vexr twgl实现数据扭曲canvas动画效果代码

代码语言：html

所属分类：动画

代码描述：vexr结合twgl实现数据曲面扭曲动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  margin: 0;
}

canvas {
  display: block;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
}
</style>




</head>

<body >
  <canvas id="c"></canvas>

<script id="vs" type="x-shader/x-vertex">
	attribute vec4 position;
varying vec2 textureCoords;
  
void main() {
  textureCoords = position.xy;
  gl_Position = position;
}
</script>

<script id="fs" type="x-shader/x-vertex">
	precision mediump float;

varying vec2 textureCoords;

uniform vec2 u_resolution;
uniform float u_time;
uniform sampler2D u_chart;
  uniform sampler2D u_checker;
uniform float u_size;

void main() {
  
  float x = textureCoords.x+sin(textureCoords.y+u_time*.234786)-u_time*0.2;
  float y = atan(textureCoords.y*cos(x+u_time*0.323345345))+u_time*0.3;
  
  gl_FragColor = texture2D(u_chart, vec2(x,y));
}
</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/JustAddMusic.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/twgl.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vexr.min.js"></script>
      <script >
"use strict";
const gl = document.querySelector("#c").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

const WINDOW_SIZE = 16;
const LINES = 16;

const colors = [
[0x25, 0x28.........完整代码请登录后点击上方下载按钮下载查看