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

device orientation

Browse Source
This commit is contained in:
Gyuri Horák 2023-03-10 19:39:47 +01:00
parent 032ff9fc88
commit f3ad6b1d50
Signed by: dyuri
GPG Key ID: 4993F07B3EAE8D38
3 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@ -1,3 +1,2 @@
- fix mouse, add button, drag
- device orientation

52
demo/orientation.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>&lt;repa-shader&gt; demo</title>
<script type="module" src="../src/repa-texture.js"></script>
<script type="module" src="../src/repa-shader.js"></script>
<style>
body {
margin: 0;
padding: 0;
background: repeating-linear-gradient(45deg, #333, #333 10px, #666 10px, #666 20px);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#fsinput {
width: 90vw;
height: 50vh;
}
</style>
</head>
<body>
<repa-shader id="demoshader" fs-input="fsinput" alpha orientation width=512 height=512>
<repa-texture src="avatar.png" name="tex_avatar" wrap="mirrored_repeat"></repa-texture>
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 col = .5 + .5 * cos(uv.xyx + time + vec3(0, 2, 4));
col *= texture(tex_avatar, uv).rgb;
float dist = distance(uv, .5 - orientation.zy / 180.);
float circle = smoothstep(.1, .2, dist) * .5 + .5;
vec4 acolor = vec4(col * circle, circle);
outColor = vec4(acolor);
}
</repa-shader>
<div>
<textarea id="fsinput"></textarea>
</div>
<button id="update">Update</button>
<script>
const updateButton = document.getElementById('update');
updateButton.addEventListener('click', () => {
const fsinput = document.getElementById('fsinput');
const shader = document.querySelector('repa-shader');
shader.render(fsinput.value);
});
</script>
</body>
</html>

12
src/repa-shader.js
View File

@ -18,6 +18,7 @@ const CHUNKS = {
precision highp float;
uniform vec2 resolution;
uniform vec3 mouse;
uniform vec3 orientation;
uniform float time;
uniform float frame;
`,
@ -163,6 +164,10 @@ class RepaShader extends HTMLElement {
this._gl.viewport(0, 0, width, height);
}
_onOrientationEvent(e) {
this._orientation = [e.alpha, e.beta, e.gamma];
}
_onMouseEvent(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);
@ -291,6 +296,10 @@ class RepaShader extends HTMLElement {
// TODO touch ?
}
if (this.hasAttribute('orientation')) {
window.addEventListener('deviceorientation', this._onOrientationEvent.bind(this));
}
this.mode = this.getAttribute('mode') || this.mode;
const program = this._gl.createProgram();
@ -326,6 +335,7 @@ class RepaShader extends HTMLElement {
this._uniLocation = {};
this._uniLocation.resolution = this._gl.getUniformLocation(this.program, 'resolution');
this._uniLocation.mouse = this._gl.getUniformLocation(this.program, 'mouse');
this._uniLocation.orientation = this._gl.getUniformLocation(this.program, 'orientation');
this._uniLocation.time = this._gl.getUniformLocation(this.program, 'time');
this._uniLocation.frame = this._gl.getUniformLocation(this.program, 'frame');
@ -343,6 +353,7 @@ class RepaShader extends HTMLElement {
this._attLocation = this._gl.getAttribLocation(this.program, 'position');
this._mousePosition= [0, 0, 0];
this._orientation = [0, 0, 0];
this._startTime = Date.now();
this._frame = 0;
@ -376,6 +387,7 @@ class RepaShader extends HTMLElement {
this._gl.clear(this._gl.COLOR_BUFFER_BIT);
this._gl.uniform2fv(this._uniLocation.resolution, [this._target.width, this._target.height]);
this._gl.uniform3fv(this._uniLocation.mouse, this._mousePosition);
this._gl.uniform3fv(this._uniLocation.orientation, this._orientation);
this._gl.uniform1f(this._uniLocation.time, this._nowTime * .001);
this._gl.uniform1f(this._uniLocation.frame, this._frame);