webgl实现canvas流沙动画效果代码
代码语言：html
所属分类：粒子
代码描述：webgl实现canvas流沙动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>
<meta charset="UTF-8">
<style>
body {
background: #666;
margin: 0;
overflow: hidden;
}
canvas {
height: 100vh;
width: 100vw;
touch-action: none;
}
.osc {
left: 0px;
position: fixed;
top: 0px;
}
.button {
position: fixed;
z-index: 10;
right: 0;
bottom: 0;
}
.controls {
position: fixed;
z-index: 10;
left: 0;
bottom: 0;
}
.playpause {
background: #AAB;
padding: 10px;
}
.playpause label {
display: block;
box-sizing: border-box;
width: 0;
height: 20px;
cursor: pointer;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
will-change: border-width;
border-style: double;
border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
visibility: hidden;
}
.playpause.checked label {
border-style: double;
border-width: 0px 0 0px 20px;
}
.playpause label {
border-style: solid;
border-width: 10px 0 10px 20px;
}
/* } */
</style>
</head>
<body >
<script id="vertexShader_particle" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec3 a_colour;
attribute vec2 a_reference;
uniform vec2 u_resolution;
uniform sampler2D b_velocity;
uniform sampler2D b_position;
uniform sampler2D b_blur;
varying vec3 v_colour;
varying float v_fogDepth;
float rand(vec2 n) {
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
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);
}
void main() {
vec2 position = texture2D(b_position, a_reference).xy;
vec2 velocity = texture2D(b_velocity, a_reference).xy;
float size = texture2D(b_blur, position).r;
vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
gl_Position = pos;
gl_PointSize = 2.+size*.02;
v_colour = vec3(1);
}
</script>
<script id="vertexShader_buffer" 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_velocity" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision highp float;
#define PI 3.141592653589793
#define HPI 1.5707963267948966
#define TAU 6.283185307179586
#define G 0.67408
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D s_noise;
uniform sampler2D b_velocity;
uniform sampler2D b_position;
// Simplex 3D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float rand(float n){return fract(sin(n) * 43758.5453123);}
float rand(vec2 n) {
return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
}
float snoise(vec3 v){
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0. + 0.0 * C
vec3 x1 = x0 - i1 + 1.0 * C.xxx;
vec3 x2 = x0 - i2 + 2.0 * C.xxx;
vec3 x3 = x0 - 1. + 3.0 * C.xxx;
// Permutations
i = mod(i, 289.0 );
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients
// ( N*N points uniformly over a square, mapped onto an octahedron.)
float n_ = 1.0/7.0; // N=7
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
float noise21(vec2 n) {
const vec2 d = vec2(0.0, 1.0);
vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 position = texture2D(b_position, uv).xy;
vec2 velocity = texture2D(b_velocity, uv).xy;
float n = snoise(vec3(position*.002, u_time - floor(u_time) * 20.)) * 3.14159;
n = snoise(vec3((position+n)*.002, n));
float a = n * (3.14159 * 2.) + noise21(position)*7.;
float c = cos(a);
float s = sin(a);
velocity = velocity + vec2(c, s) * .1;
if(length(velocity) > 1.) velocity = normalize(velocity)*1.;
gl_FragColor = vec4(velocity, 0., 1.0);
}
</script>
<script id="fragmentShader_position" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision highp float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D s_noise;
uniform vec2 u_screen;
uniform sampler2D b_velocity;
uniform sampler2D b_position;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
vec2 position = texture2D(b_position, uv).xy;
vec2 velocity = texture2D(b_velocity, uv).xy;
vec2 pos = position+velocity*.99;
if(pos.x > u_screen.x + 20.) pos.x = -10.;
else if(pos.x < -20.) pos.x = u_screen.x + 10.;
if(pos.y > u_screen.y + 20.) pos.y = -10.;
else if(pos.y < -20.) pos.y = u_screen.y + 10.;
gl_FragColor = vec4(pos, 0., 1.0);
}
</script>
<script id="fragmentShader_particle" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision highp float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D s_noise;
uniform sampler2D b_prime;
uniform sampler2D b_position;
varying vec3 v_colour;
varying float v_fogDepth;
vec2 getScreenSpace() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
return uv;
}
void main() {
vec2 uv = gl_PointCoord.xy - .5;
vec2 s = gl_FragCoord.xy / u_resolution.xy;
gl_FragColor = vec4(0, 0, 0, 1);
float l = length(uv);
float c = smoothstep(.5, 0., l);
float fog = smoothstep(-200., -1., v_fogDepth);
float opacity = c * fog;
gl_FragColor = vec4(v_colour, opacity);
}
</script>
<script id="fragmentShader_blur" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision highp float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D s_noise;
uniform sampler2D b_prime;
uniform sampler2D b_blur;
varying vec3 v_colour;
const float blurMultiplier = 0.985;
const float blurStrength = .3;
const int samples = 6;
const float sigma = float(samples) * 0.25;
#define PI 3.141592653589793
#define TAU 6.283185307179586
#define pow2(x) (x * x)
vec2 getScreenSpace() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
return uv;
}
float gaussian(vec2 i) {
return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
}
vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
vec4 col = vec4(0.0);
float accum = 0.0;
float weight;
vec2 offset;
for (int x = -samples / 2; x < samples / 2; ++x) {
for (int y = -samples / 2; y < samples / 2; ++y) {
offset = vec2(x, y);
weight = gaussian(offset);
col += texture2D(sp, uv + scale * offset) * weight;
accum += weight;
}
}
return col / accum;
}
void main() {
vec2 s = gl_FragCoord.xy / u_resolution;
vec2 ps = vec2(1.0) / u_resolution.xy;
vec4 p = texture2D(b_prime, s);
vec4 b = blur(b_blur, s, ps*blurStrength);
vec4 opt = b * blurMultiplier + p;
gl_FragColor = opt;
}
</script>
<script id="fragmentShader_output" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision highp float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D s_noise;
uniform sampler2D b_prime;
uniform sampler2D b_blur;
varying vec3 v_colour;
vec2 getScreenSpace() {
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
return uv;
}
const int samples = 8;
const float sigma = float(samples) * 0.25;
#define PI 3.141592653589793
#define TAU 6.283185307179586
#define pow2(x) (x * x)
float gaussian(vec2 i) {
return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
}
vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
vec4 col = vec4(0.0);
float accum = 0.0;
float weight;
vec2 offset;
for (int x = -samples / 2; x < samples / 2; ++x) {
for (int y = -samples / 2; y < samples / 2; ++y) {
offset = vec2(x, y);
weight = gaussian(offset);
col += texture2D(sp, uv + scale * offset) * weight;
accum += weight;
}
}
return col / accum;
}
void main() {
vec2 s = gl_FragCoord.xy / u_resolution;
vec4 p = texture2D(b_prime, s);
vec4 b = texture2D(b_blur, s);
b.a = clamp(b.a*.001, 0., 1.);
p = blur(b_prime, s, (vec2(1)/u_resolution)*.5)*(b.a+.2);
vec4 opt = mix(b, p, p.a);
gl_FragColor = vec4(mix(vec3(0.05,.1,.1), opt.rgb, opt.a), 1.);
// gl_FragColor = opt;
}
</script>
<script type="module">
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';
import gifJs from 'https://cdn.skypack.dev/gif.js';
console.clear();
const setup = function () {
// Simulation dimensions
const px = Math.min(window.devicePixelRatio, 2);
const dimensions = [window.innerWidth, window.innerHeight];
const texturesize = 128;
const particles = Math.pow(texturesize, 2);
const textureArraySize = particles * 4;
const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
const ctx = renderer.ctx;
let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);
const ants = new Float32Array(particles * 2).fill(0);
const references = new Float32Array(particles * 2).fill(0);
const positionData = new Float32Array(particles * 4).fill(0);
const velocityData = new Float32Array(particles * 4).fill(0);
for (let i = 0; i < ants.length; i += 2) {
const index = i / 2;
const tindex = i * 2;
ants[i] = index % texturesize; // x position
ants[i + 1] = Math.floor(index / texturesize); // y position
references[i] = ants[i] / texturesize; // x position of the texture particle representing this ant
references[i + 1] = ants[i + 1] / texturesize; // y position of the texture particle representing this ant
positionData[tindex] = Math.random() * (window.innerWidth * px + 40);
positionData[tindex + 1] = Math.random() * (window.innerHeight * px + 40);
positionData[tindex + 2] = 0;
positionData[tindex + 3] = 1;
velocityData[tindex] = Math.random() - .5;
velocityData[tindex + 1] = Math.random() - .5;
velocityData[tindex + 2] = 0;
velocityData[tindex + 3] = 1;
}
// for (let i = 0; i < textureArraySize; i += 4) {
// positionData[i] = Math.random();
// positionData[i + 1] = Math.random();
// positionData[i + 2] = 0;
// positionData[i + 3] = 1;
// }
const positionBuffer = new FrameBuffer(renderer, 'position', {
width: texturesize,
height: texturesize,
tiling: Texture.IMAGETYPE_TILE,
texdepth: FrameBuffer.TEXTYPE_FLOAT,
pxRatio: 1,
data: positionData });
const velocityBuffer = new FrameBuffer(renderer, 'velocity', {
width: texturesize,
height: texturesize,
tiling: Texture.IMAGETYPE_TILE,
texdepth: FrameBuffer.TEXTYPE_FLOAT,
pxRatio: 1,
data: velocityData });
const blurBuffer = new FrameBuffer(renderer, 'blur', {
width: window.innerWidth,
height: window.innerHeight,
tiling: Texture.IMAGETYPE_REGULAR,
texdepth: FrameBuffer.TEXTYPE_FLOAT,
pxRatio: Math.min(window.devicePixelRatio, 2) });
const primaryBuffer = new FrameBuffer(renderer, 'prime', {
width: window.innerWidth,
height: window.innerHeight,
tiling: Texture.IMAGETYPE_REGULAR,
pxRatio: Math.min(window.devicePixelRatio, 2) });
const drawBuffer = new Buffer(ctx, drawing);
const antBuffer = new Buffer(ctx, ants, {
attributes: [{
name: 'ants',
numComponents: 2 }] });
const referenceBuffer = new Buffer(ctx, references, {
attributes: [{
name: 'reference',
numComponents: 2 }] });
const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
const vertexShader_particle = document.getElementById('vertexShader_particle').innerText;
const programPosition = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_position').innerText, {
renderType: Program.RENDER_STRIP });
const programVelocity = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_velocity').innerText, {
renderType: Program.RENDER_STRIP });
const programBlur = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_blur').innerText, {
renderType: Program.RENDER_STRIP });
const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, {
// clearColour: [.15,.1,.05, 1.],
clearColour: [.9, .9, .9, 0.],
renderType: Program.RENDER_POINTS,
blending: Renderer.BLENDING_NORMAL,
depthTesting: false,
transparent: false,
premultiplied: false });
const programOutput = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_output').innerText, {
clearColour: [.0, .0, .0, 1.],
renderType: Program.RENDER_STRIP });
const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0., 0.]);
const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [window.innerWidth * px, window.innerHeight * px]);
const noise = new Texture(ctx, 'noise', {
textureType: Texture.IMAGETYPE_TILE,
url: '//repo.bfw.wiki/bfwrepo/image/5dd653c337706.png' });
noise.preload().then(n => {
requestAnimationFrame(run);
});
let pointerdown = false;
let lastPos = new Vec2();
window.addEventListener('pointerdown', e => {
pointerdown = true;
lastPos = new Vec2(e.x, e.y);
});
window.addEventListener('pointerup', e => {
pointerdown = false;
});
window.addEventListener('pointermove', e => {
if (pointerdown) {
let newPos = new Vec2(e.x, e.y);
mouse.value = newPos.array;
}
});
let playing = true;
const setPlaying = value => {
playing = value;
};
let autoTransitionTimer = 0;
let timeToTransition = 0;
const setupValues = i => {
dimensions[0] = window.innerWidth;
dimensions[1] = window.innerHeight;
time.value = -10000;
};
setupValues(0);
let timeout;
window.addEventListener('resize', () => {
clearTimeout(timeout);
timeout = setTimeout(() => {
dimensions[0] = window.innerWidth;
dimensions[1] = window.innerHeight;
renderer.resize(dimensions[0], dimensions[1]);
blurBuffer.resize(dimensions[0], dimensions[1]);
primaryBuffer.resize(dimensions[0], dimensions[1]);
screen.value = [dimensions[0] * px, dimensions[1] * px];
}, 100);
});
let then = 0;
const run = delta => {
let now = Date.now() / 1000;
let _delta = now - then;
then = now;
if (_delta > 1000) {
requestAnimationFrame(run);
return;
}
if (playing) {
uDelta.value = Math.min(_delta, 0.5);
time.value += _delta * .05;
renderer.setViewport([velocityBuffer.width, velocityBuffer.height]);
// window.renderer = renderer;
// console.log(renderer.uniformResolution.value)
renderer.setupProgram(programVelocity, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
velocityBuffer.render(4);
renderer.setupProgram(programPosition, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
positionBuffer.render(4);
renderer.setViewport();
renderer.setupProgram(programMain, [referenceBuffer], [], [time, mouse, velocityBuffer, positionBuffer, screen, blurBuffer]);
primaryBuffer.render(particles);
renderer.setViewport();
renderer.setupProgram(programBlur, [drawBuffer], [], [time, primaryBuffer]);
blurBuffer.render(4);
renderer.setViewport();
renderer.setupProgram(programOutput, [drawBuffer], [], [time, primaryBuffer, blurBuffer]);
renderer.render(4);
requestAnimationFrame(run);
}
};
};
// Determine whether a number is a power of 2
function powerOf2(v) {
return v && !(v & v - 1);
}
// Return the next greatest power of 2
function nextPow2(v) {
v--;
v |= v >> 1;
v |= v >> 2;
v |= v >> 4;
v |= v >> 8;
v |= v >> 16;
v++;
return v;
}
// Update a provided image to the nearest power of 2 in size.
const pow2Image = c => {
const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
const _c = document.createElement('canvas');
const ctx = _c.getContext('2d');
_c.width = newWidth;
_c.height = newHeight;
ctx.drawImage(c, 0, 0, newWidth, newHeight);
return _c;
};
const asyncImageLoad = function (img, src) {
return new Promise((resolve, reject) => {
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
};
const glEnumToString = function () {
const haveEnumsForType = {};
const enums = {};
function addEnums(gl) {
const type = gl.constructor.name;
if (!haveEnumsForType[type]) {
for (const key in gl) {
if (typeof gl[key] === 'number') {
const existing = enums[gl[key]];
enums[gl[key]] = existing ? `${existing} | ${key}` : key;
}
}
haveEnumsForType[type] = true;
}
}
return function glEnumToString(gl, value) {
addEnums(gl);
return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
};
}();
const addExtensions = ctx => {
// Set up the extensions
ctx.getExtension('OES_standard_derivatives');
ctx.getExtension('EXT_shader_texture_lod');
ctx.getExtension('OES_texture_float');
ctx.getExtension('WEBGL_color_buffer_float');
ctx.getExtension('OES_texture_float_linear');
ctx.getExtension('EXT_color_buffer_float');
};
function createContext(c, opt_attribs, params) {
const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);
addExtensions(ctx);
return ctx;
}
const quatToMat4 = q => {
if (q.array) q = q.array; // This just transforms a provided vector into to an array.
if (q instanceof Array && q.length >= 4) {
const [x, y, z, w] = q;
const [x2, y2, z2] = q.map(x => x * 2.);
const xx = x * x2,
yx = y * x2,
yy = y * y2,
zx = z * x2,
zy = z * y2,
zz = z * z2,
wx = w * x2,
wy = w * y2,
wz = w * z2;
return new Mat4(
1 - yy - zz, yx - wz, zx + wy, 0,
yx + wz, 1 - xx - zz, zy - wx, 0,
zx - wy, zy + wx, 1 - xx - yy, 0,
0, 0, 0, 1);
}
};var _blending = new WeakMap();var _blendingEnabled = new WeakMap();var _buffers = new WeakMap();
class Renderer {
constructor(canvas, options) {_defineProperty(this, "isWebgl2", false);_blending.set(this, { writable: true, value: void 0 });_blendingEnabled.set(this, { writable: true, value: false });_buffers.set(this, { writable: true, value: [] });
options = Object.assign({}, _classStaticPrivateFieldSpecGet(Renderer, Renderer, _defaultOptions), options);
this.width = options.width;
this.height = options.height;
this.pxRatio = options.pxRatio;
this.clearing = options.clearing;
this.depthTesting = options.depthTesting;
this.canvas = canvas || document.createElement('canvas');
this.canvas.width = this.width * this.pxRatio;
this.canvas.height = this.height * this.pxRatio;
this.premultipliedAlpha = options.premultipliedAlpha;
this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);
this.ctx.viewportWidth = this.canvas.width;
this.ctx.viewportHeight = this.canvas.height;
this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
this.addExtensions();
}
resize(w, h, ratio) {
this.width = w;
this.height = h;
this.pxRatio = ratio || this.pxRatio;
this.canvas.width = this.width * this.pxRatio;
this.canvas.height = this.height * this.pxRatio;
this.ctx.viewportWidth = this.canvas.width;
this.ctx.viewportHeight = this.canvas.height;
this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
}
setViewport(dimensions) {
let w = this.width * this.pxRatio;
let h = this.height * this.pxRatio;
if (dimensions) {
w = dimensions[0];
h = dimensions[1];
}
this.ctx.viewport(0, 0, w, h);
this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
}
addExtensions() {
this.ctx.getExtension('OES_standard_derivatives');
this.ctx.getExtension('EXT_shader_texture_lod');
this.ctx.getExtension('OES_texture_float');
this.ctx.getExtension('WEBGL_color_buffer_float');
this.ctx.getExtension('OES_texture_float_linear');
this.ctx.getExtension('EXT_color_buffer_float');
}
linkBuffer(buffer) {
let hasBuffer = false;
_classPrivateFieldGet(this, _buffers).forEach(b => {
if (buffer === b) hasBuffer = true;
});
if (!hasBuffer) {
this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
this.ctx.bufferData(
this.ctx.ARRAY_BUFFER,
buffer.data,
buffer.drawType);
}
buffer.link(this.currentProgram.program);
}
setupProgram(program, buffers, attributes, uniforms) {
this.currentProgram = program;
this.ctx.useProgram(program.program);
this.premultiplied = program.premultiplied;
this.depthTesting = program.depthTesting;
if (program.blending === Program.BLENDING_NORMAL && program.transparent === false) {
this.blending = Program.BLENDING_OFF;
} else {
this.blending = program.blending;
}
this.clearColour = program.clearColour;
const a = this.clearColour[3];
// console.log('prem', this.premultipliedAlpha)
if (this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a);
this.ctx.clearColor(...this.clearColour);
// TODO: Unlink unused buffers during this setup phase as well.
buffers.forEach(buffer => {
this.linkBuffer(buffer);
});
// this.ctx.enable(ctx.DEPTH_TEST);
if (this.depthTesting) this.ctx.enable(this.ctx.DEPTH_TEST);else
this.ctx.disable(this.ctx.DEPTH_TEST);
uniforms.forEach(uniform => {
uniform.bind(program.program);
});
this.uniformResolution.bind(program.program);
}
render(points, buffer) {
this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, (buffer === null || buffer === void 0 ? void 0 : buffer.fb) || null);
if (this.clearing) {
this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);
if (this.depthTesting) this.ctx.clear(this.ctx.DEPTH_BUFFER_BIT);
}
switch (this.currentProgram.renderType) {
case Program.RENDER_TRIANGLES:
this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
break;
case Program.RENDER_STRIP:
this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, points);
break;
case Program.RENDER_LINES:
this.ctx.drawArrays(this.ctx.LINE_STRIP, 0, points);
break;
case Program.RENDER_LINELOOP:
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0