Issues with rendering in Three.js CanvasRender: faces continuously flicker on and off

I am creating two relatively simple shapes that do not overlap in terms of their geometry.

Below is the code snippet for reference: http://jsfiddle.net/pGD4n/9/

Within this code, there is a Three.js Trackball feature allowing you to click and drag to rotate the objects in 3D space. However, while rotating the objects, some faces disappear, revealing the object underneath. Further rotation may bring back the missing face, but cause others to disappear.

I have experimented with BasicMaterial, Normal Material, and LambertMaterial using both SmoothShading and Flat Shading. I have also tested the scene with and without lighting. Increasing the distance between the objects seems to solve the issue, even though the meshes do not overlap in the provided code example. This problem occurs in both Chrome and Firefox browsers.

I believe switching to the OpenGL renderer could fix the problem, but we require compatibility with the Canvas renderer.

Any assistance or suggestions would be greatly appreciated.

javascriptcanvas3dthree.js

Answer №1

The CanvasRenderer has a limitation when it comes to per pixel z sorting. Due to this limitation, the renderer tries to sort the entire polygon instead of individual pixels. This can cause some "jumping" effects depending on where you are looking from.

Currently, the only solution is to use the WebGLRenderer. I am in the process of developing a new renderer for context2d that may solve this issue without requiring WebGL, but it is still a work in progress and will take some time.

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

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

Reviewing the source code: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; import { HomePage } from './home.page'; import { LevelGridComponent } from &a ...

javascriptangularunit-testingtestingjasmine

Creating a heading transition that moves from the bottom to the top with CSS

I am looking to add an animation effect to the H1 element in my program. I want it to smoothly appear from the bottom hidden position using a CSS transition when the page loads. How can I achieve this? Additionally, I need the height of the bounding elemen ...

javascripthtmlcss

Vue.js HTML5 Editor_vueful

I am currently utilizing browserify and attempting to incorporate the vue-html5-editor library from https://github.com/PeakTai/vue-html5-editor. However, when I attempt the following code: Vue.use(require('vue-html5-editor')); An error is thro ...

javascripthtmlvue.js

When utilizing the "nofollow/sponsored" attribute, window.open will open in a new window as opposed to a new tab

When using a window.open link with the "nofollow" attribute, I expect it to open in a new tab. However, it opens in a new window instead. This code successfully opens in a new tab: $('.b_link').click(function (e) { e.preventDefau ...

javascripthtmljqueryhyperlink

React Native app experiences a start-up crash caused by SoLoader problem

I'm encountering a problem with my Android app (iOS is working fine). Every time I build it, the application closes before launching. I've tried various solutions found on Github and here, but haven't been able to resolve it yet. The instal ...

javascriptandroidreactjsreact-native

Encountering issues with trailing bytes error in redis 3.0.6 when using socket.io-redis

Utilizing phpredis for transmitting data to node.js through the pubsub method brought about an issue after upgrading node.js to stable version 4.2, resulting in a trailing byte error from the socket.io-redis module. Here is the code snippet in question: ...

javascriptnode.jssocketsredissocket.io-redis

Created a notification for when the user clicks the back button, but now looking to remove it upon form submission

My survey is lengthy and I don't want users to accidentally lose their data by clicking the back button. Currently, I have an alert that warns them about potential data loss, but the alert also pops up when they submit the form. Is there a way to disa ...

javascriptjqueryhtmlforms

Dependable Timeout Functionality in JavaScript

We are currently developing an AngularJS application that presents users with questions and keeps track of the number of correct answers within a strict 20-minute time limit. However, there are some challenging requirements we need to consider: Accuracy C ...

javascriptangularjstimercountdown

Mongoose encountered an error when attempting to cast the value "......" as an ObjectId in the "author" path. The error was caused by a BSONError

I'm currently facing an issue with Mongoose in my NextJS project. Specifically, I am encountering a problem when trying to save a document where one of the fields references an ObjectId. The error message I receive is as follows: Cast to ObjectId fail ...

javascriptnode.jsmongoosenext.js

Executing a callback function in Swift using JavaScriptCore

Struggling to figure out how to call a Javascript Function with a callback from Swift, but it's not working as expected. Here's what I have: Javascript: global.calculateWithCb = function(temp,cb){ cb(5 * temp) } global.calculate = functi ...

javascriptiosswiftcallbackjavascriptcore

Guide to using Puppeteer for downloading PDFs from a website

My goal is to utilize Puppeteer for downloading PDF files from a particular website. However, I am unsure how to instruct it to download all the files automatically. For instance: One file on the website follows this format: example.com/Contents/xxx-1.pdf ...

javascriptnode.jspuppeteer

Selenium, scrolling through web pages

I have been attempting to scroll through a webpage using Selenium at "https://jobsearch.az/vacancies". However, when you open the page and click on a job vacancy, there are two side-by-side pages that need to be scrolled. The challenge is to scroll the one ...

javascriptpythonjavaseleniumscroll

Error receiving by React while updating an array with setState() in TypeScript

I am in search of a way to adjust a property of an item within an array by using the updater returned from setState. The function is passed down as props to the child, who then invokes it with their own index to update their status. const attemptToUpdate ...

javascriptreactjstypescriptreact-nativereact-hooks

Update the document by sending the data and making changes based on the AJAX response

Currently, I am avoiding using jQuery and trying to work with the following code in PHP: <?php header ( 'Content-Type: text/xml; charset=utf-8' ); $con = @mysql_connect ( "localhost", "root", "" ) or die ( "Couldn't connect to database" ...

javascriptphpajax

Error: Attempted to update user profile with an invalid function in Firebase

After creating an Avatar Chooser, I am encountering an error when selecting an image. Instead of displaying the selected image in the avatar, the error message is being displayed. How can I resolve this and ensure that the image appears in the Avatar Icon ...

javascriptreactjsfirebasefirebase-authentication

When IntelliJ starts Spring boot, resources folder assets are not served

I'm following a tutorial similar to this one. The setup involves a pom file that manages two modules, the frontend module and the backend module. Tools being used: IDE: Intellij, spring-boot, Vue.js I initialized the frontent module using vue init w ...

javascriptmavenspring-bootintellij-ideavue.js

How to activate a window that's been minimized in Chrome

I am experiencing an issue with a button that is supposed to open a new window as a popup below the parent page. It works correctly in IE and Firefox, but in Chrome, the popup appears on top of the parent window. Can someone please provide a solution? Fo ...

javascriptgoogle-chromepopup

Displaying and hiding collapsible items in Bootstrap 4: A guide to showing one item at a time

I'm working on collapsible menus and I need them to completely hide when one is clicked, instead of just collapsing. This behavior is different from an accordion setup. To achieve this, I incorporated the following function into my code: $('#bo ...

javascriptbootstrap-4

Encounter a problem while installing node modules

I am facing an issue with my test directory which contains a package.json file: { "name": "test", "version": "0.0.1", "dependencies": { "hem": "~0.1.6", } } Upon trying to run node install, I encounter the following error: module.js:337 ...

javascriptnode.jsnpm

What is the best way to refresh my view after loading a new JavaScript file that is required to generate the correct HTML elements?

When I use $http.get() to retrieve my model $scope.workoutData, the object appears fine in the console.log(data) output. However, my view does not load as if it has received the model. Once the model is updated, I also need to trigger the owlCarousel() fun ...

javascriptangularjsowl-carousel