mirror of
https://github.com/dyuri/repa-shader.git
synced 2025-12-16 11:14:25 +00:00
texture element improvements
This commit is contained in:
parent
9b2d99e5a0
commit
5c137b4d23
GPG Key ID:
4993F07B3EAE8D38
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title><repa-shader> demo</title>
|
||||
<script type="module" src="../src/repa-texture.js"></script>
|
||||
<script type="module" src="../src/repa-shader.js"></script>
|
||||
<style>
|
||||
body {
|
||||
@ -26,6 +27,7 @@
|
||||
<repa-texture src="avatar.png"></repa-texture>
|
||||
<repa-texture src="futas.mp4"></repa-texture>
|
||||
<!-- repa-texture src="webcam"></repa-texture -->
|
||||
<!-- repa-texture ref="demoshader"></repa-texture -->
|
||||
<script type="x-shader/x-fragmen[DELETE]t">
|
||||
// https://twigl.app/?ol=true&ss=-NOAlYulOVLklxMdxBDx
|
||||
void main() {
|
||||
|
||||
@ -7,14 +7,6 @@ const createLogger = pfx => {
|
||||
};
|
||||
};
|
||||
|
||||
const isImage = (src) => {
|
||||
return /\w+\.(jpg|png|jpeg|svg|webp)(?=\?|$)/i.test(src);
|
||||
};
|
||||
|
||||
const isVideo = (src) => {
|
||||
return /\w+\.(mp4|3gp|webm|ogv|avif)(?=\?|$)/i.test(src);
|
||||
};
|
||||
|
||||
const CHUNKS = {
|
||||
es300: '#version 300 es\n',
|
||||
geeker: `
|
||||
@ -608,213 +600,6 @@ void main() {
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO
|
||||
* - display content on canvas
|
||||
* - src change
|
||||
* - ready promise
|
||||
**
|
||||
* types: image, [video, webcam], [canvas, shader]
|
||||
*/
|
||||
class RepaTexture extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.logger = createLogger(["%c[repa-texture]", "background: #282828; color: #fabd2f"]);
|
||||
this.ready = false;
|
||||
this._forceUpdate = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// TODO ?
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
// TODO ?
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['src', 'type', 'name', 'mag-filter', 'min-filter', 'wrap-s', 'wrap-t'];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
// TODO
|
||||
this.logger.info(`Attribute changed: ${name} ${oldValue} -> ${newValue}`);
|
||||
this._load();
|
||||
}
|
||||
|
||||
async _load() {
|
||||
this.ready = false;
|
||||
|
||||
const ref = this.getAttribute('ref');
|
||||
if (ref) {
|
||||
const refEl = document.getElementById(ref);
|
||||
if (refEl) {
|
||||
this.ref = refEl;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.ref) {
|
||||
const src = this.getAttribute('src');
|
||||
if (src) {
|
||||
this.ref = await this._loadSource(src);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.ref) {
|
||||
this.ready = true;
|
||||
this._forceUpdate = true;
|
||||
} else {
|
||||
this.logger.error('Source cannot be loaded');
|
||||
}
|
||||
}
|
||||
|
||||
async _loadSource(src) {
|
||||
const type = this.getAttribute('type') || this._guessType(this.src);
|
||||
this._type = type;
|
||||
|
||||
if (!type) {
|
||||
this.logger.error(`Unknown type: ${src}`);
|
||||
} else {
|
||||
this.logger.log(`Loading ${src} as ${type}`);
|
||||
}
|
||||
|
||||
let ref = null;
|
||||
|
||||
switch (type) {
|
||||
case 'image':
|
||||
ref = await this._loadImage(src);
|
||||
break;
|
||||
case 'video':
|
||||
ref = await this._loadVideo(src);
|
||||
break;
|
||||
case 'webcam':
|
||||
ref = await this._createWebcam();
|
||||
break;
|
||||
}
|
||||
|
||||
return ref;
|
||||
}
|
||||
|
||||
_hideInDOM(el) {
|
||||
const hiddenEl = document.createElement('div');
|
||||
hiddenEl.style.width = hiddenEl.style.height = '1px';
|
||||
hiddenEl.style.overflow = 'hidden';
|
||||
hiddenEl.style.position = 'absolute';
|
||||
hiddenEl.style.top = hiddenEl.style.left = '-100px';
|
||||
hiddenEl.style.zIndex = '-100';
|
||||
hiddenEl.style.opacity = '0';
|
||||
hiddenEl.style.pointerEvents = 'none';
|
||||
hiddenEl.appendChild(el);
|
||||
|
||||
document.body.appendChild(hiddenEl);
|
||||
}
|
||||
|
||||
async _loadImage(src) {
|
||||
const imgEl = document.createElement('img');
|
||||
imgEl.crossOrigin = 'anonymous';
|
||||
const loader = new Promise((resolve, reject) => {
|
||||
imgEl.onload = () => resolve(imgEl);
|
||||
imgEl.onerror = reject;
|
||||
imgEl.src = src;
|
||||
});
|
||||
|
||||
this._hideInDOM(imgEl);
|
||||
|
||||
return await loader;
|
||||
}
|
||||
|
||||
async _loadVideo(src) {
|
||||
const videoEl = document.createElement('video');
|
||||
videoEl.crossOrigin = 'anonymous';
|
||||
videoEl.autoplay = true;
|
||||
videoEl.loop = true;
|
||||
videoEl.muted = true;
|
||||
videoEl.playsInline = true;
|
||||
videoEl.src = src;
|
||||
|
||||
this._hideInDOM(videoEl);
|
||||
|
||||
return videoEl;
|
||||
}
|
||||
|
||||
async _createWebcam() {
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
const videoEl = document.createElement('video');
|
||||
videoEl.autoplay = true;
|
||||
videoEl.width = 640;
|
||||
videoEl.height = 480;
|
||||
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
videoEl.srcObject = stream;
|
||||
|
||||
this._hideInDOM(videoEl);
|
||||
|
||||
return videoEl;
|
||||
}
|
||||
|
||||
this.logger.error('Webcam is not supported');
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
get type() {
|
||||
if (this._type) {
|
||||
return this._type;
|
||||
}
|
||||
|
||||
if (this.ref) {
|
||||
if (this.ref instanceof HTMLImageElement) {
|
||||
return 'image';
|
||||
} else if (this.ref instanceof HTMLVideoElement) {
|
||||
return 'video';
|
||||
} else if (this.ref instanceof HTMLCanvasElement) {
|
||||
return 'canvas';
|
||||
} else if (this.ref instanceof RepaShader) {
|
||||
return 'shader';
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
_guessType(src) {
|
||||
if (src.toLowerCase() === 'webcam') {
|
||||
return 'webcam';
|
||||
}
|
||||
|
||||
if (isImage(src)) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (isVideo(src)) {
|
||||
return 'video';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get shouldUpdate() {
|
||||
return this._forceUpdate || (this.ref && this.ref instanceof HTMLVideoElement && this.ref.readyState === this.ref.HAVE_ENOUGH_DATA);
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this.ref?.videoWidth || this.ref?.width || 0;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this.ref?.videoHeight || this.ref?.height || 0;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("repa-shader", RepaShader);
|
||||
customElements.define("repa-texture", RepaTexture);
|
||||
|
||||
export default RepaShader;
|
||||
|
||||
export {
|
||||
RepaShader,
|
||||
RepaTexture,
|
||||
};
|
||||
|
||||
290
src/repa-texture.js
Normal file
290
src/repa-texture.js
Normal file
@ -0,0 +1,290 @@
|
||||
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 isImage = (src) => {
|
||||
return /\w+\.(jpg|png|jpeg|svg|webp)(?=\?|$)/i.test(src);
|
||||
};
|
||||
|
||||
const isVideo = (src) => {
|
||||
return /\w+\.(mp4|3gp|webm|ogv|avif)(?=\?|$)/i.test(src);
|
||||
};
|
||||
|
||||
/* TODO
|
||||
* - display content on canvas
|
||||
* - src change
|
||||
* - ready promise
|
||||
**
|
||||
* types: image, [video, webcam], [canvas, shader]
|
||||
*/
|
||||
class RepaTexture extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.logger = createLogger(["%c[repa-texture]", "background: #282828; color: #fabd2f"]);
|
||||
this.ready = false;
|
||||
this._forceUpdate = false;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._load();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
// TODO ?
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['src', 'type', 'name', 'mag-filter', 'min-filter', 'wrap-s', 'wrap-t'];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
this.logger.info(`Attribute changed: ${name} ${oldValue} -> ${newValue}`);
|
||||
if (this.ready) {
|
||||
if (name === 'src') {
|
||||
this._load(true);
|
||||
} else {
|
||||
this._forceUpdate = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async _load(reload = false) {
|
||||
if (this.ready && !reload) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.ready = false;
|
||||
|
||||
// drop old content if we created it
|
||||
if (this._hiddenEl) {
|
||||
this._hiddenEl.remove();
|
||||
this.ref = null;
|
||||
}
|
||||
|
||||
// load new ref
|
||||
const ref = this.getAttribute('ref');
|
||||
if (ref) {
|
||||
const refEl = document.getElementById(ref);
|
||||
if (refEl) {
|
||||
this.ref = refEl;
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.ref) {
|
||||
const src = this.getAttribute('src');
|
||||
if (src) {
|
||||
try {
|
||||
this.ref = await this._loadSource(src);
|
||||
} catch (e) {
|
||||
this.logger.error(`Source ${src} cannot be loaded:`, e);
|
||||
this.ready = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.ref) {
|
||||
this.ready = true;
|
||||
this._forceUpdate = true;
|
||||
} else {
|
||||
this.logger.error('Source cannot be loaded');
|
||||
}
|
||||
}
|
||||
|
||||
async _loadSource(src) {
|
||||
const type = this.getAttribute('type') || this._guessType(this.src);
|
||||
this._type = type;
|
||||
|
||||
if (!type) {
|
||||
this.logger.error(`Unknown type: ${src}`);
|
||||
} else {
|
||||
this.logger.log(`Loading ${src} as ${type}`);
|
||||
}
|
||||
|
||||
let ref = null;
|
||||
|
||||
switch (type) {
|
||||
case 'image':
|
||||
ref = await this._loadImage(src);
|
||||
break;
|
||||
case 'video':
|
||||
ref = await this._loadVideo(src);
|
||||
break;
|
||||
case 'webcam':
|
||||
ref = await this._createWebcam();
|
||||
break;
|
||||
}
|
||||
|
||||
return ref;
|
||||
}
|
||||
|
||||
_hideInDOM(el) {
|
||||
const hiddenEl = document.createElement('div');
|
||||
hiddenEl.setAttribute('hidden', '');
|
||||
hiddenEl.style.width = hiddenEl.style.height = '1px';
|
||||
hiddenEl.style.overflow = 'hidden';
|
||||
hiddenEl.style.position = 'absolute';
|
||||
hiddenEl.style.top = hiddenEl.style.left = '-100px';
|
||||
hiddenEl.style.zIndex = '-100';
|
||||
hiddenEl.style.opacity = '0';
|
||||
hiddenEl.style.pointerEvents = 'none';
|
||||
hiddenEl.appendChild(el);
|
||||
|
||||
this._hiddenEl = hiddenEl;
|
||||
document.body.appendChild(this._hiddenEl);
|
||||
}
|
||||
|
||||
async _loadImage(src) {
|
||||
const imgEl = document.createElement('img');
|
||||
imgEl.crossOrigin = 'anonymous';
|
||||
const loader = new Promise((resolve, reject) => {
|
||||
imgEl.onload = () => resolve(imgEl);
|
||||
imgEl.onerror = reject;
|
||||
imgEl.src = src;
|
||||
});
|
||||
|
||||
this._hideInDOM(imgEl);
|
||||
|
||||
return await loader;
|
||||
}
|
||||
|
||||
async _loadVideo(src) {
|
||||
const videoEl = document.createElement('video');
|
||||
videoEl.crossOrigin = 'anonymous';
|
||||
videoEl.autoplay = true;
|
||||
videoEl.loop = true;
|
||||
videoEl.muted = true;
|
||||
videoEl.playsInline = true;
|
||||
videoEl.src = src;
|
||||
|
||||
this._hideInDOM(videoEl);
|
||||
|
||||
return videoEl;
|
||||
}
|
||||
|
||||
async _createWebcam() {
|
||||
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
||||
const videoEl = document.createElement('video');
|
||||
videoEl.autoplay = true;
|
||||
videoEl.width = 640;
|
||||
videoEl.height = 480;
|
||||
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
videoEl.srcObject = stream;
|
||||
|
||||
this._hideInDOM(videoEl);
|
||||
|
||||
return videoEl;
|
||||
}
|
||||
|
||||
this.logger.error('Webcam is not supported');
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this.getAttribute('src');
|
||||
}
|
||||
|
||||
get type() {
|
||||
if (this._type) {
|
||||
return this._type;
|
||||
}
|
||||
|
||||
if (this.ref) {
|
||||
if (this.ref instanceof HTMLImageElement) {
|
||||
return 'image';
|
||||
} else if (this.ref instanceof HTMLVideoElement) {
|
||||
return 'video';
|
||||
} else if (this.ref instanceof HTMLCanvasElement) {
|
||||
return 'canvas';
|
||||
} else if (this.ref.nodeName === 'REPA-SHADER') {
|
||||
return 'shader';
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get content() {
|
||||
if (this.ref) {
|
||||
if (this.type === 'shader') {
|
||||
return this.ref.target;
|
||||
} else {
|
||||
return this.ref;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
_guessType(src) {
|
||||
if (src.toLowerCase() === 'webcam') {
|
||||
return 'webcam';
|
||||
}
|
||||
|
||||
if (isImage(src)) {
|
||||
return 'image';
|
||||
}
|
||||
|
||||
if (isVideo(src)) {
|
||||
return 'video';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
get shouldUpdate() {
|
||||
return this._forceUpdate || (this.ref && this.ref instanceof HTMLVideoElement && this.ref.readyState === this.ref.HAVE_ENOUGH_DATA);
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this.ref?.videoWidth || this.ref?.width || 0;
|
||||
}
|
||||
|
||||
get height() {
|
||||
return this.ref?.videoHeight || this.ref?.height || 0;
|
||||
}
|
||||
|
||||
get magFilter() {
|
||||
return this.getAttribute('mag-filter') || 'linear';
|
||||
}
|
||||
|
||||
get minFilter() {
|
||||
return this.getAttribute('min-filter') || 'linear';
|
||||
}
|
||||
|
||||
get wrapS() {
|
||||
return this.getAttribute('wrap-s') || 'clamp-to-edge';
|
||||
}
|
||||
|
||||
get wrapT() {
|
||||
return this.getAttribute('wrap-t') || 'clamp-to-edge';
|
||||
}
|
||||
|
||||
get name() {
|
||||
if (!this._name) {
|
||||
let name = this.getAttribute('name');
|
||||
if (!name) {
|
||||
const textures = this.parentNode.querySelectorAll('repa-texture');
|
||||
textures.forEach((texture, i) => {
|
||||
if (texture === this) {
|
||||
name = `texture${i}`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this._name = name;
|
||||
}
|
||||
|
||||
return this._name;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("repa-texture", RepaTexture);
|
||||
|
||||
export default RepaTexture;
|
||||
Loading…
Reference in New Issue
Block a user