dyuri/repa-shader
1
0
Fork 0
mirror of https://github.com/dyuri/repa-shader.git synced 2025-12-16 11:14:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

texture attributes

Browse Source
This commit is contained in:
Gyuri Horák 2023-02-26 17:43:19 +01:00
parent 46064c7d93
commit 92a4decd8f
Signed by: dyuri
GPG Key ID: 4993F07B3EAE8D38
4 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO.md
View File

@ -1,8 +1,5 @@
- textures
- image
- canvas
- video
- webcam
- canvas / other shader
- audio
- mic?
- fix mouse, add button, drag

2
demo/index.html
View File

@ -24,7 +24,7 @@
</head>
<body>
<repa-shader id="demoshader" fs-input="fsinput" alpha mouse snippets="noise.glsl" width=512 height=512>
<repa-texture src="avatar.png" name="tex_avatar"></repa-texture>
<repa-texture src="avatar.png" name="tex_avatar" wrap="mirrored_repeat"></repa-texture>
<repa-texture src="futas.mp4"></repa-texture>
<!-- repa-texture src="webcam"></repa-texture -->
<!-- repa-texture ref="demoshader"></repa-texture -->

30
src/repa-shader.js
View File

@ -216,7 +216,7 @@ class RepaShader extends HTMLElement {
// textures
buff.textures = [];
buff.buffers = []; // TODO ???
buff.buffers = [];
for (let i = 0; i < this.mrt; i++) {
let texture = this._gl.createTexture();
this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
@ -243,6 +243,14 @@ class RepaShader extends HTMLElement {
this._resetBuffer(this.frontbuffer);
}
_getWrap(wrap) {
return this._gl[wrap.toUpperCase().replaceAll('-', '_')] || this._gl.CLAMP_TO_EDGE;
}
_getFilter(filter) {
return this._gl[filter.toUpperCase().replaceAll('-', '_')] || this._gl.LINEAR;
}
_collectTextures() {
this._textures = [];
@ -250,14 +258,13 @@ class RepaShader extends HTMLElement {
const texture = this._gl.createTexture();
this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
// TODO get params from attributes
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE);
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._gl.LINEAR);
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, this._gl.LINEAR);
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._getWrap(t.wrapS));
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._getWrap(t.wrapT));
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._getFilter(t.minFilter));
this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, this._getFilter(t.magFilter));
// fill texture with default black
this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, 1, 1, 0, this._gl.RGBA, this._gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));
this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, 1, 1, 0, this._gl.RGBA, this._gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
this._textures.push({
texture,
@ -274,9 +281,10 @@ class RepaShader extends HTMLElement {
this.backbuffer = this._createBuffer(this._target.width, this._target.height);
if (this.hasAttribute('mouse')) {
this._target.addEventListener('mousemove', this._onMouseEvent.bind(this));
this._target.addEventListener('pointermove', this._onMouseEvent.bind(this));
this._target.addEventListener('mousedown', this._onMouseEvent.bind(this));
this._target.addEventListener('mouseup', this._onMouseEvent.bind(this));
// TODO touch ?
}
this.mode = this.getAttribute('mode') || this.mode;
@ -304,7 +312,7 @@ class RepaShader extends HTMLElement {
return;
}
// TODO sound? textures?
// TODO sound?
if (this._program) {
this._gl.deleteProgram(this._program);
@ -454,8 +462,8 @@ class RepaShader extends HTMLElement {
_createTarget() {
const target = document.createElement('canvas');
target.width = this.width || 300; // TODO
target.height = this.height || 300; // TODO
target.width = this.width || 300;
target.height = this.height || 300;
this.shadowRoot.appendChild(target);
return target;

15
src/repa-texture.js
View File

@ -17,7 +17,6 @@ const isVideo = (src) => {
/* TODO
* - display content on canvas
* - src change
* - ready promise
**
* types: image, [video, webcam], [canvas, shader]
@ -34,12 +33,8 @@ class RepaTexture extends HTMLElement {
this._load();
}
disconnectedCallback() {
// TODO ?
}
static get observedAttributes() {
return ['src', 'type', 'mag-filter', 'min-filter', 'wrap-s', 'wrap-t'];
return ['src', 'type', 'mag-filter', 'min-filter', 'filter', 'wrap-s', 'wrap-t', 'wrap'];
}
attributeChangedCallback(name, oldValue, newValue) {
@ -259,19 +254,19 @@ class RepaTexture extends HTMLElement {
}
get magFilter() {
return this.getAttribute('mag-filter') || 'linear';
return this.getAttribute('mag-filter') || this.getAttribute('filter') || 'linear';
}
get minFilter() {
return this.getAttribute('min-filter') || 'linear';
return this.getAttribute('min-filter') || this.getAttribute('filter') || 'linear';
}
get wrapS() {
return this.getAttribute('wrap-s') || 'clamp-to-edge';
return this.getAttribute('wrap-s') || this.getAttribute('wrap') || 'clamp-to-edge';
}
get wrapT() {
return this.getAttribute('wrap-t') || 'clamp-to-edge';
return this.getAttribute('wrap-t') || this.getAttribute('wrap') || 'clamp-to-edge';
}
get name() {