p5实现波光粼粼动画效果代码-html代码-BFW代码库

p5实现波光粼粼动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现波光粼粼动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
</head>

<body>
  
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
      <script  >
let theShader;
let debug_div = document.querySelector('.debug-el');

const vertexShader = `
	// - - - .VERT FILE - - - 

	// This code is applied to every PIXEL.

	// THIS IS THE .VERT FILE. is used to place and position the pixel edits of the .frag file.

	// The .vert file indicates how each pixel in the shader should be colored.

	// - - - - - 

	// SETUP code

	// If GL_ES (Browser shader API) is deteced 
	#ifdef GL_ES

	// Indicate the precision of the shader
	// "highp" or "mediump" or "lowp"
	// float is the data type
	precision mediump float;
	#endif


	//"attribute" is calls the a global variable between the .vert and the OpenGLES environment. "vec3" indicates that the variable has 3 parameters (x, y, z). "aPosition" is a read-only variable defining the default position info of the shader. 

	attribute vec3 aPosition;


	varying vec3 vPos;


	// Shader coordinate system is opposite a p5 canvas. It starts in teh lower left corner (0.0, 0.0) and then goes to the upper right (1.0, 1.0). 
	// Everything is defined on a scale for 0-1.
	// So pos.........完整代码请登录后点击上方下载按钮下载查看