Changing the main directory name in a Three.JS project triggers an unexpected aliasing glitch

Creating a new stackoverflow account just to ask a question is not my usual style, but I am completely baffled by this issue.

For months, I have been struggling with a strange bug that causes a glitch in my three.js VR projects on Android. My usual method of rebuilding everything from scratch has not been successful in pinpointing the cause.

Today, I discovered a way to reproduce the problem by modifying Google's Cardboard three.js example. Renaming the root folder from 'WTF' to 'WTFF' triggers the error, which is quite frustrating. It seems that the project's root folder name has a significant impact on the WebGL content rendering.

Does anyone have any insights into why the root folder's name affects the rendering of WebGL content? I am well-versed in three.js but not in WebGL, so there may be some underlying factor related to the folder structure that I am unaware of.

I haven't included any code since the issue seems unrelated to the actual code. However, I am open to sharing if it might be helpful in finding a solution.

Thank you in advance for any assistance! :)

Update: After taking a break and returning, even the original 'WTF' folder structure is now displaying the error. I am confused by this sudden change in behavior, as I have tried to force a reload but the issue persists.

javascriptandroidgoogle-chromethree.js

Answer №1

After much investigation, I believe I have discovered the solution:

Although I cannot pinpoint the exact root cause, it appears that the issue is related to Chrome for Android rather than WebGL or Three.js. It seems that Chrome for Android caches the WebGL content and performs certain actions on it that trigger this error when the folder structure changes.

To resolve this issue, simply clear the cache in Chrome (Navigate to Settings -> Application Manager -> Chrome -> Clear Cache).

I trust this information will prove useful to anyone facing a similar dilemma in the future!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding elements to an array appears to cause the previously created object to react

I am encountering a situation where once I add an object to an array, it becomes reactive to any changes made. // actions.js export const addToCart = ({ commit }) => { commit('addToCart'); // successfully updates the state setTimeout ...

javascriptvue.jsvuex

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

javascripthtml

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Exploring Time Scaling and Range Adjustment in D3 Barcharts

My dataset looks something like this: dateRange = [ { date: 2017-03-23, value: 10 }, { date: 2017-03-25, value: 15 }, { date: 2017-04-01, value: 13 }, { date: 2017-04-02, value: 19 } ]; The results can be viewed here: https://embed.plnkr.co/iOBAuCZmo ...

javascriptd3.jsbar-chart

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

Utilizing Promises in the apply function

I am currently working on a project in Node.js that utilizes bluebird for promise handling, as well as ES6 native promises. In both projects, I have a chain where I make a database query structured like this: some_function(/*...*/) .then(function () ...

javascriptnode.jsbluebirdes6-promise

Remove an array object in React Redux

I recently started using Redux and I’ve encountered a major issue. Whenever I try to remove an object from an array, the map function stops working. Do you have any tips or suggestions? reducer.js: const initialState = { storeState: { name: ...

javascriptreactjsredux

Use jQuery to apply a class to some input elements when certain events like keyup or

If I type something in the input field, it should add a border to the li tag containing the text. The current script works fine, but is there a way to make this jQuery script shorter? Thank you for your help! .add_border{ border: 2px solid #000 !impor ...

javascriptjquerycss

Does the angular scope binding using the &(ampersand) operator only bind once or repeatedly?

Is the angular scope binding &(ampersand) a one time binding? I see it referred to as a one-way binding, but is it also one-time? Let's say I have: <my-custom-directive data-item="item" /> And my directive is declared as follows: .direct ...

javascriptangularjsangularjs-scopeangular-directive

Tips on resolving the Hydration error in localStorage while using Next.js

Having issues persisting context using localStorage in a Next.js project, resulting in hydration error upon page refresh. Any ideas on how to resolve this issue? type AppState = { name: string; salary: number; info: { email: string; departme ...

javascriptreactjsnext.js

the integration of shapes in three.js is malfunctioning

There has been a dynamic change in the path. The previous render function was as follows (where LENGTH, getPosition(), RADIUS, MATERIAL, and SCENE have already been set) var prevPosition = getPosition(); for(var i =0; i < LENGTH; i++) { drawPath(g ...

javascriptmergethree.jsgeometry

The straightforward use of XMLHttpRequest to retrieve the response xhttp.responseText is not functioning properly

I am facing an issue where this.responseText is not returning the content of the file. Can someone assist me in solving this problem? Thank you. Console.log also does not return the content of the file. function loadMegaContent() { var xhttp = new XMLHtt ...

javascripthtmlajax

The passport authentication process is malfunctioning as there seems to be an issue with the _verify function

Having an issue and could use some assistance. I am currently implementing passport in my express application. While I am able to successfully register a user, I encounter an error when trying to log in. TypeError: this._verify is not a function at Str ...

javascriptnode.jsexpresspassport.js

Add a variable to the configuration

Here is my configuration setup angular.module('moduleApp.config') .config(['$translateProvider', '$languageSupportProvider', function($translateProvider, $languageSupportProvider) { // Need to access data from myS ...

javascriptangularjs

The issue arises when interfaces are extended by another interface

Is there a way to have classes that implement both the Observer and Comparable interfaces together? interface Comparable<T> { equals: (item: T) => boolean; } interface Observer extends Comparable<Observer> { notify: () => void } ...

javascripttypescript

Update the appearance of a cell if the value within it is equal to zero

I have discovered a way to achieve this using inputs. input[value="0"] { background-color:#F7ECEC; color:#f00;} Now, I am looking for assistance in applying the same concept to table cells. Can anyone provide guidance? Thank you. ...

javascripthtmlcss

Having issues with incorporating a component into another component in VueJS

Having spent approximately 30 hours on diving into VueJS, I am encountering some difficulties when it comes to using a component within another component. Seeking assistance from someone knowledgeable in this area to provide me with some clarification. Pr ...

javascriptvue.jsvuejs2

Storing numerous sets of application credentials in Node.js using a specific design pattern

As I develop a node.JS server that communicates with Microsoft APIs, the server manages multiple applications created in Azure, each requiring a configured Client ID and Client secret. I have implemented a strategy to switch between these credentials based ...

javascriptnode.jsarchitectureenvironment-variablesmicrosoft-graph-api

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

javascripthtmlcssweb

Checking for the existence of a value in an object using Angular loops

I am seeking assistance in verifying the presence of a specific value within an object. My Object = (vagas.etapas) "Etapas" : { "05daf060-87cb-47cf-8c98-65b36941613d" : "Name 1", "0bf7aabf-42df-4f7d-86dc-af81e6cef394 ...

javascriptarraysangulartypescriptobject