Example of multiple canvas in three.js using WebGL

Currently, I'm undertaking a project that involves the use of multiple cameras to render the scene onto different canvases. I found some issues with this approach particularly when it comes to the clipping plane behaving oddly at the edges. While everything seems fine with larger objects, smaller ones get clipped on the edge. To illustrate this problem, I have created an example below.

I am exploring various ways to address this problem, including:

  • Experimenting with overlapping the renders slightly to widen the clipping plane.
  • Investigating if there is a way to disable the clipping altogether.
  • Possibly resorting to crying myself to sleep.

Am I overlooking a simple solution, or will I need to delve deeper into this issue?

Thank you in advance for your assistance!

javascriptcanvasthree.jswebglclipping

Answer №1

It seems the issue lies in creating 4 instances of the App object, each with different sets of random spheres. To ensure consistency across views, the objects must be placed in the same positions within each instance of App.

The code snippet below was inserted at line 129 in your sample:

var randomSeed_ = 0;
var RANDOM_RANGE_ = Math.pow(2, 32);

Math.random = function() {
  return (randomSeed_ =
          (134775813 * randomSeed_ + 1) %
           RANDOM_RANGE_) / RANDOM_RANGE_;
};

This custom random function generates the same values for each App since it initializes randomSeed_ to 0 in every app.

Understanding your overall goal would provide context for a more tailored solution. The Three.JS example you referred to demonstrates how rendering can be distributed across four monitors on separate machines arranged in a grid.

You may find these examples helpful as well: - Demonstrates rendering for monitors of varying sizes not arranged in a grid - Shows rendering for monitors arranged in a circular or semi-circular layout - Google's immersive Liquid Galaxy project.

In addition, you can explore: - Multiple viewports within a single canvas, although updates may be needed for this particular example - Implementing drawing using one large canvas and placeholder elements for positioning, as shown here

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

What could be causing the carousel to be hidden in a Next.js project?

My project involves utilizing the react-multi-carousel component to display a maximum of two stock photos. I made modifications to the next.config.js file as well. import Image from "next/image"; import Carousel from "react-multi-carousel&qu ...

javascriptnext.jscarousel

"Using Node.js to create a simulated mobile environment: a step-by-step guide

I am seeking a way to replicate the functionalities of a mobile browser using Node.js. This means that all mobile browser features should be accessible on the client-side, even if they are simulated. The goal is for webpages to believe they are being load ...

javascriptnode.jsmobile

Sending an object from a web server to a client

After creating a C# web application that calls a web-service returning a base64 encoded array (PDF file), I convert the array to a UCOMIStream object to comply with the DLL parameters. The code for this conversion works flawlessly, allowing me to print the ...

c#javascriptstreamasp.netole

What could be causing my second ajax call to render the page unresponsive?

I am encountering an issue with my AJAX call. It works fine on the first attempt, but when I try to call it a second time, the page becomes unresponsive. I am not sure what is causing this issue. The code is located within the document ready function. The ...

javascripthtmljqueryajaxmaterial-design

What are the strategies used by AngularJS's official website to create SEO-friendly pages?

If you're interested in seeing how AngularJS.org presents pre-rendered content to search engine bots and scrapers, take a look at http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09 I'm intrigued by the implementation strategy used f ...

javascriptajaxangularjsseo

How do you retrieve an element using its tag name?

Just delving into the world of API's here. Working on a project involving loading a DIV with a bunch of links that I need to repurpose. Managed to disable the default onclick function, now trying to figure out how to save the "innerHTML" attribute of ...

javascriptjquerythisgetelementsbytagname

Explore through descendant elements and locate attributes (up to a specified number of levels)

Consider the JSON data below: var responseData = { "Status": "Met", "Text": "Text1", "Id": "AAA", "ContentItems": [ { "Selected": true, "Text": "Text2", "Id": "BBB" }, { "Status": "Met", "Text": "Text3", ...

javascriptjsonrecursion

Wordpress woes: When Ajax fails to yield a successful result

I am facing an issue where I am trying to retrieve a return value from an AJAX call when the database gets updated. The data is being sent through AJAX to a function located in functions.php within one of the Wordpress plugins' folders. However, whene ...

javascriptphpjqueryajaxwordpress

Infinite loop occurring when setting state to child component in React

On a page featuring dropdown menus for content searching, the dropdown is non-functional but provides context. This page serves as a listing page. After performing calculations on the listing page and updating the state, I encounter an infinite loop when ...

javascriptreactjscomponentssetstate

Surprising symbol encountered: JavaScript, Node.js, and MongoDB

                 I am facing an unexpected identifier error while running the code below when trying to check if the documents' state has changed. Despite exhausting my Google search and looking for documentation on MongoDB, I am yet to find ...

javascriptnode.jsmongodb

Which should I opt for when defining a Model - Sequelize or DataType?

In my Node-Express app, I utilized Sequelize to manage a MySQL database. As I attempted to define a Teacher model by following the documentation, I came across two potential options. The initial option involved performing: var Teacher = sequelize.define(& ...

javascriptmysqlnode.jsexpresssequelize.js

Issue arising in Angular 7 due to the binding between the TypeScript (ts) file and HTML file for the property [min]

I am currently utilizing Angular Cli version 7.3.9 In my project, I have implemented a date type input that is intended to display, in its datepicker, starting from the next day after the current date. This is how I approached it in my .ts file: debugger ...

javascriptangulartypescript

Encountering a User Agent error while trying to update Vue to the latest version using N

I was interested in experimenting with staging.vuejs. When I tried to install it using the command npm init vue@latest, I encountered an error. Here is the link for reference: https://i.stack.imgur.com/rCipP.png SPEC Node : v12.13.0 @vue/cli : v4.5.15 ...

javascriptvue.jsnpm

Comparing timestamps in JavaScript and PHP - what are the discrepancies?

I seem to be having an issue with the inconsistency in count between two timestamps. Upon page load, I set the input value as follows: $test_start.val(new Date().getTime()); //e.g. equal to 1424157813 Upon submitting the form via ajax, the PHP handler sc ...

javascriptphpjqueryajaxtimestamp

A way to retrieve the value from a list item when clicked on a menu to facilitate dynamic routing in Vue.js

**I have currently created a separate component for each list item, but I'm looking to make this more dynamic as it's taking too long to load. Unfortunately, I'm unsure of how to go about this.** <nav class="navbar navbar-expand-lg ...

javascripthtmlvue.jsurl-routingvue-router

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

I have successfully implemented a feature to display markers on the map from a geojson file. Currently, when I hover over a marker, I can see its properties in a popup. However, I now want to enhance this functionality so that when a user clicks on a mar ...

javascripthtmlleafletzoomingmarker

Error updating model: The `teams` model cannot be modified once it has been compiled

After spending hours researching on StackOverflow, I came across numerous articles related to my issue. However, I am still unable to identify what mistake I have made here. Here is my code: models/Team.js const mongoose = require('mongoose'); ...

javascriptnode.jsmongodbmongoose

What could be causing the post method to fail in this AngularJS example?

After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

Using an image within the input group in Bootstrap 4

I'm a beginner in web development and I'm currently utilizing the glyphicon. This is how I'm currently using it: const className = `form-group ${touched && error ? 'has-danger' : ''}`; <div className={classN ...

javascriptreactjsbootstrap-4

Exploring various templates with AngularJS Directives

Let's delve into a slightly complex topic, but I'll simplify it as much as possible for you. There is a directive in play: .directive('configuratorRows', function () { return { restrict: 'A', scope: { ...

javascriptangularjs