mirror of
https://github.com/dyuri/repa-shader.git
synced 2025-12-16 19:24:06 +00:00
init
This commit is contained in:
parent
5b79eeccb6
commit
9ed0c18487
GPG Key ID:
4993F07B3EAE8D38
23
demo/index.html
Normal file
23
demo/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title><repa-shader> demo</title>
|
||||||
|
<script type="module" src="../src/repa-shader.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<repa-shader>
|
||||||
|
<script type="x-shader/x-vertex">
|
||||||
|
attribute vec3 position;
|
||||||
|
void main() {
|
||||||
|
gl_Position = vec4(position, 1.0);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="x-shader/x-fragment">
|
||||||
|
void main() {
|
||||||
|
outColor = vec4(1.0, 0.0, 0.0, 1.0);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</repa-shader>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
317
src/repa-shader.js
Normal file
317
src/repa-shader.js
Normal file
@ -0,0 +1,317 @@
|
|||||||
|
const createLogger = pfx => {
|
||||||
|
return {
|
||||||
|
info: (...args) => console.info(...pfx, ...args),
|
||||||
|
log: (...args) => console.log(...pfx, ...args),
|
||||||
|
warn: (...args) => console.warn(...pfx, ...args),
|
||||||
|
error: (...args) => console.error(...pfx, ...args),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const CHUNKS = {
|
||||||
|
es300: '#version 300 es\n',
|
||||||
|
geeker: `
|
||||||
|
#define FC gl_FragCoord
|
||||||
|
#define r resolution
|
||||||
|
#define m mouse
|
||||||
|
#define t time
|
||||||
|
#define f frame
|
||||||
|
precision highp float;
|
||||||
|
uniform vec2 resolution;
|
||||||
|
uniform vec2 mouse;
|
||||||
|
uniform float time;
|
||||||
|
uniform float frame;
|
||||||
|
out vec4 outColor;
|
||||||
|
`, // TODO sampler2D, MRT
|
||||||
|
geekestStart: `
|
||||||
|
void main() {
|
||||||
|
`,
|
||||||
|
geekestEnd: `
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
|
||||||
|
const DEMO = `
|
||||||
|
precision highp float;
|
||||||
|
uniform vec2 resolution;
|
||||||
|
uniform vec2 mouse;
|
||||||
|
uniform float time;
|
||||||
|
out vec4 outColor;
|
||||||
|
void main(){
|
||||||
|
vec2 r=resolution, p=(gl_FragCoord.xy*2.-r)/min(r.x,r.y)-mouse;
|
||||||
|
for (int i=0;i<8;++i) {
|
||||||
|
p.xy=abs(p)/abs(dot(p,p))-vec2(.9+cos(time*.2)*.4);
|
||||||
|
}
|
||||||
|
outColor=vec4(p.xxy,1);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
class RepaShader extends HTMLElement {
|
||||||
|
constructor(cfg = {}) {
|
||||||
|
super();
|
||||||
|
this._cfg = cfg;
|
||||||
|
this.attachShadow({ mode: 'open' });
|
||||||
|
this.logger = createLogger(["%c[repa-shader]", "background: #1d2021; color: #bada55"]);
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this._createStyle();
|
||||||
|
|
||||||
|
if (!this._target) {
|
||||||
|
this._target = this._createTarget();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this._gl) {
|
||||||
|
const glopts = this._cfg.glopts || {alpha: true, preserveDrawingBuffer: true};
|
||||||
|
this._gl = this._target.getContext('webgl2', glopts);
|
||||||
|
if (!this._gl) {
|
||||||
|
this.logger.error("WebGL2 not supported");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO resize
|
||||||
|
// TODO postprogram
|
||||||
|
// TODO source + reset
|
||||||
|
|
||||||
|
this._gl.bindBuffer(this._gl.ARRAY_BUFFER, this._gl.createBuffer());
|
||||||
|
this._gl.bufferData(this._gl.ARRAY_BUFFER, new Float32Array([-1,1,0,-1,-1,0,1,1,0,1,-1,0]), this._gl.STATIC_DRAW);
|
||||||
|
this._gl.disable(this._gl.DEPTH_TEST);
|
||||||
|
this._gl.disable(this._gl.CULL_FACE);
|
||||||
|
this._gl.disable(this._gl.BLEND);
|
||||||
|
this._gl.clearColor(0,0,0,1);
|
||||||
|
|
||||||
|
// TODO remove
|
||||||
|
this.demo();
|
||||||
|
}
|
||||||
|
|
||||||
|
render(source, time) {
|
||||||
|
if (!source) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._fsSource = source;
|
||||||
|
this.reset(time);
|
||||||
|
}
|
||||||
|
|
||||||
|
_resizeTarget() {
|
||||||
|
const {width, height} = this._target.getBoundingClientRect();
|
||||||
|
this._target.width = width;
|
||||||
|
this._target.height = height;
|
||||||
|
// TODO buffers
|
||||||
|
this._gl.viewport(0, 0, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
_onMouseMove(e) {
|
||||||
|
const x = Math.min(Math.max(e.offsetX, 0), this._target.width);
|
||||||
|
const y = Math.min(Math.max(e.offsetY, 0), this._target.height);
|
||||||
|
this._mousePosition = [x / this._target.width, 1 - y / this._target.height];
|
||||||
|
}
|
||||||
|
|
||||||
|
reset(time) {
|
||||||
|
this._resizeTarget();
|
||||||
|
|
||||||
|
if (this.hasAttribute('mouse')) {
|
||||||
|
this._target.addEventListener('pointermove', this._onMouseMove.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mode = this.getAttribute('mode') || this.mode;
|
||||||
|
|
||||||
|
const program = this._gl.createProgram();
|
||||||
|
const vs = this._createShader(program, this.VS, true);
|
||||||
|
if (!vs) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const fs = this._createShader(program, this.FS, false);
|
||||||
|
if (!fs) {
|
||||||
|
this._gl.deleteShader(vs);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._gl.linkProgram(program);
|
||||||
|
this._gl.deleteShader(vs);
|
||||||
|
this._gl.deleteShader(fs);
|
||||||
|
|
||||||
|
if (!this._gl.getProgramParameter(program, this._gl.LINK_STATUS)) {
|
||||||
|
const msg = this._gl.getProgramInfoLog(program);
|
||||||
|
this.logger.error("Program link error: ", msg);
|
||||||
|
// TODO error callback
|
||||||
|
program = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO geek mode
|
||||||
|
const resolution = 'resolution';
|
||||||
|
const mouse = 'mouse';
|
||||||
|
const nowTime = 'time';
|
||||||
|
const frame = 'frame';
|
||||||
|
// TODO sound? backbuffer? mrt?
|
||||||
|
|
||||||
|
if (this._program) {
|
||||||
|
this._gl.deleteProgram(this._program);
|
||||||
|
}
|
||||||
|
this.program = program;
|
||||||
|
this._gl.useProgram(this.program);
|
||||||
|
this._uniLocation = {};
|
||||||
|
this._uniLocation.resolution = this._gl.getUniformLocation(this.program, resolution);
|
||||||
|
this._uniLocation.mouse = this._gl.getUniformLocation(this.program, mouse);
|
||||||
|
this._uniLocation.time = this._gl.getUniformLocation(this.program, nowTime);
|
||||||
|
this._uniLocation.frame = this._gl.getUniformLocation(this.program, frame);
|
||||||
|
|
||||||
|
this._attLocation = this._gl.getAttribLocation(this.program, 'position');
|
||||||
|
this._mousePosition= [0, 0];
|
||||||
|
this._startTime = Date.now();
|
||||||
|
this._frame = 0;
|
||||||
|
|
||||||
|
this.draw(time);
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(time) {
|
||||||
|
if (this.running) {
|
||||||
|
requestAnimationFrame(this.draw.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (time) {
|
||||||
|
this._nowTime = time;
|
||||||
|
} else {
|
||||||
|
this._nowTime = (Date.now() - this._startTime) * 0.001;
|
||||||
|
}
|
||||||
|
|
||||||
|
++this._frame;
|
||||||
|
|
||||||
|
this._gl.useProgram(this.program);
|
||||||
|
// TODO buffers
|
||||||
|
|
||||||
|
this._gl.enableVertexAttribArray(this._attLocation);
|
||||||
|
this._gl.vertexAttribPointer(this._attLocation, 3, this._gl.FLOAT, false, 0, 0);
|
||||||
|
this._gl.clear(this._gl.COLOR_BUFFER_BIT);
|
||||||
|
this._gl.uniform2fv(this._uniLocation.resolution, [this._target.width, this._target.height]);
|
||||||
|
this._gl.uniform2fv(this._uniLocation.mouse, this._mousePosition);
|
||||||
|
this._gl.uniform1f(this._uniLocation.time, this._nowTime * .001);
|
||||||
|
this._gl.uniform1f(this._uniLocation.frame, this._frame);
|
||||||
|
|
||||||
|
this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4);
|
||||||
|
|
||||||
|
this._gl.flush();
|
||||||
|
// TODO draw callback
|
||||||
|
}
|
||||||
|
|
||||||
|
run() {
|
||||||
|
this.removeAttribute('paused');
|
||||||
|
this.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
pause() {
|
||||||
|
this.setAttribute('paused', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
get running() {
|
||||||
|
return !this.hasAttribute('paused');
|
||||||
|
}
|
||||||
|
|
||||||
|
_createShader(program, source, isVertex) {
|
||||||
|
if (!this._gl) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const type = isVertex ? this._gl.VERTEX_SHADER : this._gl.FRAGMENT_SHADER;
|
||||||
|
const shader = this._gl.createShader(type);
|
||||||
|
this._gl.shaderSource(shader, source);
|
||||||
|
this._gl.compileShader(shader);
|
||||||
|
|
||||||
|
if (!this._gl.getShaderParameter(shader, this._gl.COMPILE_STATUS)) {
|
||||||
|
const msg = this._gl.getShaderInfoLog(shader);
|
||||||
|
this.logger.error("Shader compile error:", msg); // TODO format + error callback
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// TODO success callback
|
||||||
|
this.logger.info(`Shader successfully compiled [${isVertex ? 'vertex' : 'fragment'}]`);
|
||||||
|
|
||||||
|
this._gl.attachShader(program, shader);
|
||||||
|
const log = this._gl.getShaderInfoLog(shader);
|
||||||
|
if (log) {
|
||||||
|
this.logger.log(log);
|
||||||
|
}
|
||||||
|
return shader;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createTarget() {
|
||||||
|
const target = document.createElement('canvas');
|
||||||
|
target.width = this._cfg.width || 300; // TODO
|
||||||
|
target.height = this._cfg.height || 300; // TODO
|
||||||
|
this.shadowRoot.appendChild(target);
|
||||||
|
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createStyle() {
|
||||||
|
let style = this.shadowRoot.querySelector('style') || document.createElement('style');
|
||||||
|
style.textContent = `
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
this.shadowRoot.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
_appendStyle(content) {
|
||||||
|
const style = this.shadowRoot.querySelector('style');
|
||||||
|
style.textContent += content;
|
||||||
|
}
|
||||||
|
|
||||||
|
get target() {
|
||||||
|
return this._target;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO
|
||||||
|
get VS() {
|
||||||
|
return `#version 300 es
|
||||||
|
in vec3 position;
|
||||||
|
void main(){
|
||||||
|
gl_Position=vec4(position, 1.);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
get FS() {
|
||||||
|
// auto guessing mode
|
||||||
|
// - contains `precision` -> twigl classic300es
|
||||||
|
// - no `precision`, but has `main()` -> twigl geeker300es
|
||||||
|
// - no `precision`, no `main()` -> twigl geekest300es
|
||||||
|
// TODO: mrt
|
||||||
|
if (!this.mode) {
|
||||||
|
const hasPrecision = this._fsSource.includes('precision');
|
||||||
|
const hasMain = this._fsSource.includes('main()');
|
||||||
|
if (hasPrecision) {
|
||||||
|
this.mode = 'classic';
|
||||||
|
} else if (hasMain) {
|
||||||
|
this.mode = 'geeker';
|
||||||
|
} else {
|
||||||
|
this.mode = 'geekest';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let start = '';
|
||||||
|
let end = '';
|
||||||
|
switch (this.mode) {
|
||||||
|
case 'classic':
|
||||||
|
start = CHUNKS.es300;
|
||||||
|
break;
|
||||||
|
case 'geeker':
|
||||||
|
start = CHUNKS.es300 + CHUNKS.geeker;
|
||||||
|
break;
|
||||||
|
case 'geekest':
|
||||||
|
start = CHUNKS.es300 + CHUNKS.geeker + CHUNKS.geekestStart;
|
||||||
|
end = CHUNKS.geekestEnd;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${start}\n${this._fsSource}\n${end}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
demo() {
|
||||||
|
this.render(DEMO);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("repa-shader", RepaShader);
|
||||||
|
|
||||||
|
export default RepaShader;
|
||||||
Loading…
Reference in New Issue
Block a user