From f050c394382b53ad2acfcdb483811a91bb8782fb Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 09:42:04 +0100 Subject: [PATCH 1/6] Update uvAttribute for 360_LR and 360_TB view --- src/plugin.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index e82abed5..dbf0bc3f 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -145,17 +145,20 @@ class VR extends Plugin { this.options_.sphereDetail ); - let uvs = geometry.faceVertexUvs[ 0 ]; + let uvAttribute = geometry.getAttribute("uv"); + if (uvAttribute) { + for (let i = 0; i < uvAttribute.count; i++) { + let u = uvAttribute.getX(i); + let v = uvAttribute.getY(i); - for (let i = 0; i < uvs.length; i++) { - for (let j = 0; j < 3; j++) { if (projection === '360_LR') { - uvs[ i ][ j ].x *= 0.5; + uvAttribute.setX(i, u * 0.5); } else { - uvs[ i ][ j ].y *= 0.5; - uvs[ i ][ j ].y += 0.5; + uvAttribute.setY(i, v * 0.5 + 0.5); } } + + uvAttribute.needsUpdate = true; } this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); From 9556efa0a413b43df340292fe4c7a603829d54b8 Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 11:04:04 +0100 Subject: [PATCH 2/6] manually convert BufferGeometry --- src/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin.js b/src/plugin.js index dbf0bc3f..2fc32b5b 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -161,7 +161,7 @@ class VR extends Plugin { uvAttribute.needsUpdate = true; } - this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieGeometry = new THREE.BufferGeometry().setFromObject(new THREE.Mesh(geometry)); this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); From e2f00484ea0a245419c8d70ef90940ad0e98c302 Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 11:10:33 +0100 Subject: [PATCH 3/6] use .toBufferGeometry --- src/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin.js b/src/plugin.js index 2fc32b5b..c6c8081e 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -161,7 +161,7 @@ class VR extends Plugin { uvAttribute.needsUpdate = true; } - this.movieGeometry = new THREE.BufferGeometry().setFromObject(new THREE.Mesh(geometry)); + this.movieGeometry = geometry.toBufferGeometry(); this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); From fab4ab85b3177c75af8f47e5defeac51f9a8a05a Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 11:16:15 +0100 Subject: [PATCH 4/6] no conversion neccesary --- src/plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugin.js b/src/plugin.js index c6c8081e..e23e8a46 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -161,7 +161,7 @@ class VR extends Plugin { uvAttribute.needsUpdate = true; } - this.movieGeometry = geometry.toBufferGeometry(); + this.movieGeometry = geometry this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); From e6f60ed7355a11281a2ef6a1f72c1a981de08851 Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 11:41:20 +0100 Subject: [PATCH 5/6] update API for all projections --- src/plugin.js | 111 ++++++++++++++++++++++++++------------------------ 1 file changed, 58 insertions(+), 53 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index e23e8a46..7a40c1f1 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -178,20 +178,23 @@ class VR extends Plugin { this.options_.sphereDetail ); - uvs = geometry.faceVertexUvs[ 0 ]; + uvAttribute = geometry.getAttribute("uv"); + if (uvAttribute) { + for (let i = 0; i < uvAttribute.count; i++) { + let u = uvAttribute.getX(i); + let v = uvAttribute.getY(i); - for (let i = 0; i < uvs.length; i++) { - for (let j = 0; j < 3; j++) { if (projection === '360_LR') { - uvs[ i ][ j ].x *= 0.5; - uvs[ i ][ j ].x += 0.5; + uvAttribute.setX(i, u * 0.5); } else { - uvs[ i ][ j ].y *= 0.5; + uvAttribute.setY(i, v * 0.5 + 0.5); } } + + uvAttribute.needsUpdate = true; } - this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieGeometry = geometry this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); @@ -211,25 +214,27 @@ class VR extends Plugin { const front = [new THREE.Vector2(0.333, 0), new THREE.Vector2(0.666, 0), new THREE.Vector2(0.666, 0.5), new THREE.Vector2(0.333, 0.5)]; const back = [new THREE.Vector2(0.666, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 0.5), new THREE.Vector2(0.666, 0.5)]; - this.movieGeometry.faceVertexUvs[0] = []; + const uvs = []; - this.movieGeometry.faceVertexUvs[0][0] = [ right[2], right[1], right[3] ]; - this.movieGeometry.faceVertexUvs[0][1] = [ right[1], right[0], right[3] ]; + uvs.push(...right[2].toArray(), ...right[1].toArray(), ...right[3].toArray()); + uvs.push(...right[1].toArray(), ...right[0].toArray(), ...right[3].toArray()); - this.movieGeometry.faceVertexUvs[0][2] = [ left[2], left[1], left[3] ]; - this.movieGeometry.faceVertexUvs[0][3] = [ left[1], left[0], left[3] ]; + uvs.push(...left[2].toArray(), ...left[1].toArray(), ...left[3].toArray()); + uvs.push(...left[1].toArray(), ...left[0].toArray(), ...left[3].toArray()); - this.movieGeometry.faceVertexUvs[0][4] = [ top[2], top[1], top[3] ]; - this.movieGeometry.faceVertexUvs[0][5] = [ top[1], top[0], top[3] ]; + uvs.push(...top[2].toArray(), ...top[1].toArray(), ...top[3].toArray()); + uvs.push(...top[1].toArray(), ...top[0].toArray(), ...top[3].toArray()); - this.movieGeometry.faceVertexUvs[0][6] = [ bottom[2], bottom[1], bottom[3] ]; - this.movieGeometry.faceVertexUvs[0][7] = [ bottom[1], bottom[0], bottom[3] ]; + uvs.push(...bottom[2].toArray(), ...bottom[1].toArray(), ...bottom[3].toArray()); + uvs.push(...bottom[1].toArray(), ...bottom[0].toArray(), ...bottom[3].toArray()); - this.movieGeometry.faceVertexUvs[0][8] = [ front[2], front[1], front[3] ]; - this.movieGeometry.faceVertexUvs[0][9] = [ front[1], front[0], front[3] ]; + uvs.push(...front[2].toArray(), ...front[1].toArray(), ...front[3].toArray()); + uvs.push(...front[1].toArray(), ...front[0].toArray(), ...front[3].toArray()); - this.movieGeometry.faceVertexUvs[0][10] = [ back[2], back[1], back[3] ]; - this.movieGeometry.faceVertexUvs[0][11] = [ back[1], back[0], back[3] ]; + uvs.push(...back[2].toArray(), ...back[1].toArray(), ...back[3].toArray()); + uvs.push(...back[1].toArray(), ...back[0].toArray(), ...back[3].toArray()); + + this.movieGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); this.movieScreen.position.set(position.x, position.y, position.z); @@ -247,17 +252,17 @@ class VR extends Plugin { // Left eye view geometry.scale(-1, 1, 1); - let uvs = geometry.faceVertexUvs[0]; + let uvAttribute = geometry.getAttribute("uv"); if (projection !== '180_MONO') { - for (let i = 0; i < uvs.length; i++) { - for (let j = 0; j < 3; j++) { - uvs[i][j].x *= 0.5; - } + for (let i = 0; i < uvAttribute.count; i++) { + const u = uvAttribute.getX(i); + uvAttribute.setX(i, u * 0.5); } + uvAttribute.needsUpdate = true; } - this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieGeometry = geometry this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true @@ -276,16 +281,15 @@ class VR extends Plugin { Math.PI ); geometry.scale(-1, 1, 1); - uvs = geometry.faceVertexUvs[0]; - for (let i = 0; i < uvs.length; i++) { - for (let j = 0; j < 3; j++) { - uvs[i][j].x *= 0.5; - uvs[i][j].x += 0.5; - } + uvAttribute = geometry.getAttribute("uv"); + for (let i = 0; i < uvAttribute.count; i++) { + const u = uvAttribute.getX(i); + uvAttribute.setX(i, u * 0.5 + 0.5); } + uvAttribute.needsUpdate = true; - this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieGeometry = geometry this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true @@ -373,26 +377,27 @@ void main() { vector.x = vector.x / height * (height - contCorrect * 2) + contCorrect / height; } } - - this.movieGeometry.faceVertexUvs[0] = []; - - this.movieGeometry.faceVertexUvs[0][0] = [ right[2], right[1], right[3] ]; - this.movieGeometry.faceVertexUvs[0][1] = [ right[1], right[0], right[3] ]; - - this.movieGeometry.faceVertexUvs[0][2] = [ left[2], left[1], left[3] ]; - this.movieGeometry.faceVertexUvs[0][3] = [ left[1], left[0], left[3] ]; - - this.movieGeometry.faceVertexUvs[0][4] = [ top[2], top[1], top[3] ]; - this.movieGeometry.faceVertexUvs[0][5] = [ top[1], top[0], top[3] ]; - - this.movieGeometry.faceVertexUvs[0][6] = [ bottom[2], bottom[1], bottom[3] ]; - this.movieGeometry.faceVertexUvs[0][7] = [ bottom[1], bottom[0], bottom[3] ]; - - this.movieGeometry.faceVertexUvs[0][8] = [ front[2], front[1], front[3] ]; - this.movieGeometry.faceVertexUvs[0][9] = [ front[1], front[0], front[3] ]; - - this.movieGeometry.faceVertexUvs[0][10] = [ back[2], back[1], back[3] ]; - this.movieGeometry.faceVertexUvs[0][11] = [ back[1], back[0], back[3] ]; + let uvs = []; + + uvs.push(...right[2].toArray(), ...right[1].toArray(), ...right[3].toArray()); + uvs.push(...right[1].toArray(), ...right[0].toArray(), ...right[3].toArray()); + + uvs.push(...left[2].toArray(), ...left[1].toArray(), ...left[3].toArray()); + uvs.push(...left[1].toArray(), ...left[0].toArray(), ...left[3].toArray()); + + uvs.push(...top[2].toArray(), ...top[1].toArray(), ...top[3].toArray()); + uvs.push(...top[1].toArray(), ...top[0].toArray(), ...top[3].toArray()); + + uvs.push(...bottom[2].toArray(), ...bottom[1].toArray(), ...bottom[3].toArray()); + uvs.push(...bottom[1].toArray(), ...bottom[0].toArray(), ...bottom[3].toArray()); + + uvs.push(...front[2].toArray(), ...front[1].toArray(), ...front[3].toArray()); + uvs.push(...front[1].toArray(), ...front[0].toArray(), ...front[3].toArray()); + + uvs.push(...back[2].toArray(), ...back[1].toArray(), ...back[3].toArray()); + uvs.push(...back[1].toArray(), ...back[0].toArray(), ...back[3].toArray()); + + this.movieGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); this.movieScreen.position.set(position.x, position.y, position.z); From 5f64fb1ba3f267fac6a78850b417c37ea03b4cd4 Mon Sep 17 00:00:00 2001 From: KasperQd Date: Mon, 6 Jan 2025 11:54:51 +0100 Subject: [PATCH 6/6] linting --- src/plugin.js | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index 7a40c1f1..d2fb2947 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -145,11 +145,12 @@ class VR extends Plugin { this.options_.sphereDetail ); - let uvAttribute = geometry.getAttribute("uv"); + let uvAttribute = geometry.getAttribute('uv'); + if (uvAttribute) { for (let i = 0; i < uvAttribute.count; i++) { - let u = uvAttribute.getX(i); - let v = uvAttribute.getY(i); + const u = uvAttribute.getX(i); + const v = uvAttribute.getY(i); if (projection === '360_LR') { uvAttribute.setX(i, u * 0.5); @@ -161,7 +162,7 @@ class VR extends Plugin { uvAttribute.needsUpdate = true; } - this.movieGeometry = geometry + this.movieGeometry = geometry; this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); @@ -178,11 +179,11 @@ class VR extends Plugin { this.options_.sphereDetail ); - uvAttribute = geometry.getAttribute("uv"); + uvAttribute = geometry.getAttribute('uv'); if (uvAttribute) { for (let i = 0; i < uvAttribute.count; i++) { - let u = uvAttribute.getX(i); - let v = uvAttribute.getY(i); + const u = uvAttribute.getX(i); + const v = uvAttribute.getY(i); if (projection === '360_LR') { uvAttribute.setX(i, u * 0.5); @@ -194,7 +195,7 @@ class VR extends Plugin { uvAttribute.needsUpdate = true; } - this.movieGeometry = geometry + this.movieGeometry = geometry; this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide }); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); @@ -253,16 +254,18 @@ class VR extends Plugin { // Left eye view geometry.scale(-1, 1, 1); - let uvAttribute = geometry.getAttribute("uv"); + let uvAttribute = geometry.getAttribute('uv'); + if (projection !== '180_MONO') { for (let i = 0; i < uvAttribute.count; i++) { - const u = uvAttribute.getX(i); + const u = uvAttribute.getX(i); + uvAttribute.setX(i, u * 0.5); } uvAttribute.needsUpdate = true; } - this.movieGeometry = geometry + this.movieGeometry = geometry; this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true @@ -282,14 +285,15 @@ class VR extends Plugin { ); geometry.scale(-1, 1, 1); - uvAttribute = geometry.getAttribute("uv"); + uvAttribute = geometry.getAttribute('uv'); for (let i = 0; i < uvAttribute.count; i++) { - const u = uvAttribute.getX(i); + const u = uvAttribute.getX(i); + uvAttribute.setX(i, u * 0.5 + 0.5); } uvAttribute.needsUpdate = true; - this.movieGeometry = geometry + this.movieGeometry = geometry; this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true @@ -377,26 +381,20 @@ void main() { vector.x = vector.x / height * (height - contCorrect * 2) + contCorrect / height; } } - let uvs = []; + const uvs = []; uvs.push(...right[2].toArray(), ...right[1].toArray(), ...right[3].toArray()); uvs.push(...right[1].toArray(), ...right[0].toArray(), ...right[3].toArray()); - uvs.push(...left[2].toArray(), ...left[1].toArray(), ...left[3].toArray()); uvs.push(...left[1].toArray(), ...left[0].toArray(), ...left[3].toArray()); - uvs.push(...top[2].toArray(), ...top[1].toArray(), ...top[3].toArray()); uvs.push(...top[1].toArray(), ...top[0].toArray(), ...top[3].toArray()); - uvs.push(...bottom[2].toArray(), ...bottom[1].toArray(), ...bottom[3].toArray()); uvs.push(...bottom[1].toArray(), ...bottom[0].toArray(), ...bottom[3].toArray()); - uvs.push(...front[2].toArray(), ...front[1].toArray(), ...front[3].toArray()); uvs.push(...front[1].toArray(), ...front[0].toArray(), ...front[3].toArray()); - uvs.push(...back[2].toArray(), ...back[1].toArray(), ...back[3].toArray()); uvs.push(...back[1].toArray(), ...back[0].toArray(), ...back[3].toArray()); - this.movieGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2)); this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);