Is it a graphics card malfunction or a coding complication? Delving into THREE.JS WebGL

Recently, I created a cool scene using three.js that was running perfectly until today. Strangely, without any changes to the code, I started encountering an error in every major browser - Chrome, Firefox, and Edge. The error message I am seeing is:

THREE.WebGLRenderer: Context Lost.

Could this possibly be related to an issue with my graphics card? Can anyone confirm?

Interestingly, in Chrome, I am also seeing an additional error:

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog THREE.WebGLShader: gl.getShaderInfoLog() vertex

If you'd like to take a look, here is the live link to the project (please note that it's still a work in progress):

Can someone help me determine if the project is broken due to code issues or if it's more likely a problem with my graphics card?

Thanks in advance.

EDIT: It's worth noting that other WebGL projects are functioning normally for me, which makes this situation even more puzzling if it is indeed a graphics card issue.

javascriptthree.jswebgl

Answer №1

Upon examining the page myself, it appears that the GPU is not the issue as there are no apparent errors visible. However, while using Firefox's development tools to inspect the elements, I noticed a few messages. These include;

THREE.WebGLRenderer: Texture has been resized from (500x500) to (256x256).

(One texture was too large)

THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(190,23-154): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values if you expect them

(There were several of these messages, but their meaning is unclear to me.)

Source map error: Error: request failed with status 404 Resource URL: https://ui-unicorn.co.uk/game-lesson-1/js/ifvisible.js Source Map URL: ifvisible.map

I am unsure about this error as well.

Regarding the original issue, it seems that three.module.js has its own rendering debugger that detected errors with the shaders. This suggests that there may be problems with the shaders controlling light, shadows, models, etc.

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

Bundling and minifying Angular2 assets

In the world of ASP.NET (or gulp), bundling and minification are taken care of. However, a different issue arises when following Angular2 tutorials: the view HTML is typically embedded within the component itself. Fortunately, there is a way to separate th ...

javascripttypescriptangularsystemjs

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

javascripthtmlcssreactjstypescript

Using Rxjs to handle several requests with various headers

I have a specific requirement where, if hasProcessado == true, 10 additional requests should be made before issuing the final request. If the final request fails, 3 more attempts are needed. Furthermore, when sending the last request, it is essential to n ...

javascriptangulartypescriptrxjs

Changing the width of the file input using css

Clicking just below the word demonstration also triggers a click on the input type file. How can this be avoided so that the click event only fires in the intended area regardless of size? <!DOCTYPE html> <html> <body> <style> in ...

javascriptjqueryhtmlcss

I'm having trouble with installing nx as it keeps showing the error message 'Platform Dependency for NX is Missing.'

I encountered an issue when running npm install: $ npm i npm WARN deprecated @babel/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b5b475e4c4245065b59445b44584a470648474a5858065b59445b4e595f424e586b1c051a13051d">[email  ...

javascriptnpmnomachine-nx

Utilizing Template Styling for Iterating through Lists in Vue.js

I would like the output format to display one player value followed by one monster value, repeating this pattern for each pair of values. new Vue({ el: app, data: { output: { player: [1, 5, 61, 98, 15, 315, 154, 65], monster: [2,14, ...

javascriptvue.js

Organize a collection of objects based on their individual keys

How can an array of objects be grouped based on keys using vanilla JavaScript, especially when dealing with a large number of records like 10000? Here is a sample object to illustrate: [ { company: "TATA", car: "TATA Indica", color: "Blue" }, { ...

javascriptarraysjsonobjectdata-structures

React and Axios: Overcoming CORS Policy to Connect with Java/SpringBoot REST Backend Service

As a first-time user of Axios to connect to my Java/SpringBoot Rest GET service on localhost:8080, I am using React and node.js. My goal is to successfully retrieve the REST data but encountered the following error: Failed to compile src\App.js Lin ...

javascriptreactjsaxioscors

Exploring the Inner Workings of a React ES6 Class Component

I'm currently exploring the best practices in React and I find myself questioning the structure of a React Component when utilizing ES6 classes. I am particularly interested in where to declare variables or properties that the class or .js file will u ...

javascriptreactjs

achieving bidirectional binding within a directive without using an isolated scope

One of my directives is set up like this: angular.module('somemodule').directive('tooltipText', function ($timeout, $compile, $document, config, $filter) { return { restrict: 'A', scope:{ tooltip: '=&ap ...

javascriptangularjs

Display the matrix in a semi-spiral pattern

I am working with a 3 by 5 matrix, filled with numbers from 1, presented as follows: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 The task is to print the values in a half-spiral order, starting from the bottom left vertically: 11 6 1 5 10 15 12 7 2 4 9 ...

javascriptarraysmatrix

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

javascriptjqueryhtmlcss

How do I retrieve the value of a class that is repeated multiple times?

In the HTML code I am working with, there are values structured like this: <div class="item" onClick="getcoordinates()"> <div class="coordinate"> 0.1, 0.3 </div> </div> <div class="item" onClick="getcoordinates() ...

javascripthtml

Console shows successful jQuery ajax request, but the callback function is not being executed

I've been working on a jQuery POST request that's been giving me some trouble. Here is a snippet of the code I'm using: $.ajax("/myurl",{ data:{ ... }, mimeType:"application/json", dataType:"application/json", me ...

javascriptjqueryajax

use javascript or jquery to conceal the textbox control

Looking to conceal a textbox control using javascript or jquery. I attempted the following code: document.getElementsByName('Custom_Field_Custom1').style.display="none"; Unfortunately, I received an error in the java console: document.getEle ...

javascriptjquery

Update the regular expression pattern to extract nested tags and store them in an array of objects

For my small application, I am working on creating a regex pattern to identify "faux" html tags. The goal is to capture these tags within curly brackets and output them into an array of objects. Below is the code snippet with the current regex pattern: { ...

javascriptarraysjsonregex

Tips for properly aligning an image within an owl carousel

Currently, I am attempting to center a small image within the owl carousel. While I have managed to center it when it's active and in the center, I'm encountering issues when the item no longer carries the "center" class. You can access Owlcarou ...

javascripthtmlcsssassowl-carousel

How can I detect when an image is loaded in a specific container division using jQuery?

I have a container with multiple images inside, and I would like to capture an event each time an image finishes loading. For example: <div id="container"> <img src="..." /> <img src="..." /> <img src="..." /> ...

javascriptjqueryhtml

The issue of jQuery, Ajax, and MVC6 parameters becoming null after an Ajax request has been identified

Hello everyone, I am a beginner in asp.net core, c# and MVC 6. Currently, I am facing an issue with sending data over ajax to my controller. function sendAjaxData() { $.ajax({ url: "AjaxWithData", // using hardcoded value for testing purpose type ...

javascriptjqueryajaxasp.net-core-mvc

The components for my children are not being displayed within the Drawer component in Material UI and React

Why are the Material UI components and other project components not displayed when I use my DrawerForm component? List of dependencies: react: 18.2.0 react-dom: 18.2.0 @amcharts/amcharts5: 5.3.6 @mui/icons-material: 5.11.11 @mui/material: 5.11.12 Code s ...

javascriptreactjsmaterial-uinavigation-drawer