javascript - 在 html 页面上嵌入 Web-GL 沙箱的效果

Question

我正在寻找一种显示 GLSL Sandbox 的 Web-gl 着色器的方法作为 html 页面的背景，但是似乎没有一个简单的可嵌入 API。我怎样才能做到这一点？

是否可以输入 this Shader在 html 页面上？ :

precision highp float;

uniform float time;
uniform vec2 resolution;

#define TWO_PI 6.283185
#define NUMBALLS 30.0

float d = -TWO_PI/36.0;

void main( void ) {
    vec2 p = (2.0*gl_FragCoord.xy - resolution)/min(resolution.x, resolution.y);    
    vec3 c = vec3(0);
    for(float i = 0.0; i < NUMBALLS; i++) {
        float t = TWO_PI * i/NUMBALLS + time;
        float x = cos(t);
        float y = sin(3.0 * t + d);
        vec2 q = 0.8*vec2(x, y);
        c += 0.015/distance(p, q) * vec3(0.9 * abs(x), 0, abs(y));
    }
    gl_FragColor = vec4(c, 1.0);
}

Answer 1

This answer covers canvas as a background .

This answer covers using a glslsandbox shader in three.js .

否则，您只需要使用 glslsandbox 提供的着色器绘制全屏四边形，提供 glslsandbox 提供的各种制服。原代码为here

这是来自 glslshadertoy 的着色器片段

"use strict";

const vs = `
attribute vec4 position;

void main() {
  gl_Position = position;
}
`;

// From glslsandbox.com
const fs = `
precision highp float;

uniform float time;
uniform vec2 resolution;

#define TWO_PI radians(360.0)
#define NUMBALLS 30.0

float d = -TWO_PI/36.0;

void main( void ) {
    vec2 p = (2.0*gl_FragCoord.xy - resolution)/min(resolution.x, resolution.y);    
    vec3 c = vec3(0);
    for(float i = 0.0; i < NUMBALLS; i++) {
        float t = TWO_PI * i/NUMBALLS + time;
        float x = cos(t);
        float y = sin(3.0 * t + d);
        vec2 q = 0.8*vec2(x, y);
        c += 0.015/distance(p, q) * vec3(0.9 * abs(x), 0, abs(y));
    }
    gl_FragColor = vec4(c, 1.0);
}
`;

const gl = document.querySelector("canvas").getContext("webgl");

// compiles shaders, links program, looks up locations.
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

var arrays = {
  position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
};
// calls gl.createBuffer, gl.bindBuffer, gl.bufferData for each array
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

function render(time) {
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  const uniforms = {
    time: time * 0.001,
    resolution: [gl.canvas.width, gl.canvas.height],
  };

  gl.useProgram(programInfo.program);
  
  // calls gl.bindBuffer, gl.enableVertexAttribArray, gl.vertexAttribPointer
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  
  // calls gl.uniform
  twgl.setUniforms(programInfo, uniforms);
  
  // calls gl.drawArrays or gl.drawElements
  twgl.drawBufferInfo(gl, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { 
  margin: 0; 
  color: white;  
  font-size: 20pt;
}
canvas { 
  width: 100vw; 
  height: 100vh; 
  z-index: -1; 
  display: absolute;
  position: fixed;
  top: 0;
  left: 0;
}
#content {
  margin: .5em;
}

<script src="https://twgljs.org/dist/3.x/twgl.min.js"></script>
<canvas></canvas>
<div id="content">
<pre>
Let's

make

something

long

enough

that

we

need

to

scroll

to

show

that

this

works

as

a

background

even

if

the

content

is

longer

than

the 

window

size
</pre>
</div>