From f3ad6b1d505e98a079b64fb2ce9c2b9f98f68241 Mon Sep 17 00:00:00 2001 From: Gyuri Horak Date: Fri, 10 Mar 2023 19:39:47 +0100 Subject: [PATCH] device orientation --- TODO.md | 1 - demo/orientation.html | 52 +++++++++++++++++++++++++++++++++++++++++++ src/repa-shader.js | 12 ++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 demo/orientation.html diff --git a/TODO.md b/TODO.md index cc71cfd..3047747 100644 --- a/TODO.md +++ b/TODO.md @@ -1,3 +1,2 @@ - fix mouse, add button, drag -- device orientation diff --git a/demo/orientation.html b/demo/orientation.html new file mode 100644 index 0000000..54f3055 --- /dev/null +++ b/demo/orientation.html @@ -0,0 +1,52 @@ + + + + + <repa-shader> demo + + + + + + + +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); +} + +
+ +
+ + + + diff --git a/src/repa-shader.js b/src/repa-shader.js index 07e6b83..6c6244f 100644 --- a/src/repa-shader.js +++ b/src/repa-shader.js @@ -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);