Mastering the use of gl Scissor is essential for effectively implementing popups in your

I am attempting to implement a pop-up view on top of the current webGL view.

My strategy is as follows: Whenever I need to display a popup, I create a scissorRect and begin rendering the popup scene onto it. I was hoping that the content of the previous screen would remain intact. My understanding is that setScissor should prevent the clearing of content outside the popup. However, with the code below, the content outside the popup turns black. Please note that glclear is automatically called when renderer.render() is invoked.


        if (this.options.showPopUP) {
            this.renderer.setScissorTest(true);

            this.renderer.setViewport(popupViewPort.x, popupViewPort.y, popupViewPort.z, popupViewPort.w);
            this.renderer.setScissor(popupViewPort.x, popupViewPort.y, popupViewPort.z, popupViewPort.w);

            this.renderer.render(this.popUpScene, camera.camera);
        }





    if (!this.options.showPopUP) {
        var size = this.renderer.getSize();
        this.renderer.setScissorTest(false);

        this.renderer.setViewport(0, 0, size.width, size.height);
        this.renderer.setScissor(0, 0, size.width, size.height);
        this.renderer.render(this.scene, camera.camera);

    }

Any suggestions?

Answer №1

"I had expected the information on the previous screen to remain unchanged" and "Doesn't glclear get automatically triggered when renderer.render() is invoked?" Is there a contradiction here? It may be best to render both, with the non-popup content first and then the popup.

var size = this.renderer.getSize();
this.renderer.setScissorTest(false);

this.renderer.setViewport(0, 0, size.width, size.height);
this.renderer.setScissor(0, 0, size.width, size.height);
this.renderer.render(this.scene, camera.camera);

if (this.options.showPopUP) {
    this.renderer.setScissorTest(true);

    this.renderer.setViewport(popupViewPort.x, popupViewPort.y, popupViewPort.z, popupViewPort.w);
    this.renderer.setScissor(popupViewPort.x, popupViewPort.y, popupViewPort.z, popupViewPort.w);

    this.renderer.render(this.popUpScene, camera.camera);
}

It might be necessary to clear the color/z-buffer before rendering the popup.

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

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

Leveraging UseRouter.query Data in Next.js Content Display

I'm currently diving into routing in Next.js and running into an issue where the query values are not being included in the HTML response. Despite recognizing that isReady is false and the return is happening before the variables are set, I'm uns ...

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected. var dist = $('.nav').css(width()); The goal of my script i ...

Converting a Number from Negative to Positive in JavaScript and Representing it as 32 Bit Binary

I am facing an issue with converting a number to 32-bit binary data. While converting to 16 or 8 bits works fine, the result is incorrect when attempting to convert to 32 bits. For example, for 8 bits: -1 & 255 //result -> 255 or -1 & 0xFF //r ...

Newbie Inquiry Renewed: What is the best way to convert this into a functional hyperlink that maintains the data received from the ID tag?

I have no prior training etc. If you are not willing to help, please refrain from responding as I am simply trying to learn here. <a id="player-web-Link">View in Depth Stats</a> This code snippet loads the following image: https://i.stack.i ...

Interacting with jQuery UI Droppable by setting acceptance criteria before submitting a form

My goal is to create a draggable item that can be dropped onto a specific zone. The challenge I'm facing is in displaying a form for inputting information and storing it in a database. If the input is successfully stored, the drop action will be succe ...

Any idea how to dynamically insert rows and columns into a table or div element?

Can anyone assist me with this task? I have successfully completed the visual process I intended to do. How can I achieve this structure using AngularJS? The data will be stored in Json format. When the "+" symbol is clicked in a certain direction, the fi ...

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

Generating new objects from API request in React and aggregating them into a single, comprehensive object

I have developed a program that utilizes Axios to fetch data through API calls. I aim to save the fetched result as an object within my this.state.matrixDictionary variable. However, each time I make another API call, the previous object gets replaced. My ...

how to sort arrays in javascript

When it comes to filtering items based on specific criteria like fruit and vegetable filters, what is the most effective method to retrieve items that meet both filter requirements? fruitfilter: [] = [{fruitname: "apple"} , {fruitname: "orange"}] vegeta ...

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

There was a problem with the WebSocket handshake: the response header value for 'Sec-WebSocket-Protocol' did not match any of the values sent

I've encountered an issue with my React project that involves streaming live video through a WebSocket. Whenever the camera firmware is updated, I face an error in establishing the WebSocket connection. Here's how I initiate the WebSocket: wsRe ...

Steps for showcasing a automated slideshow

I'm currently working on creating a slideshow that automatically displays multiple images. While the first image shows up just fine, it doesn't seem to transition to the next one. var currentSlide = 0; displaySlides(); functio ...

Tips on adding up the values of fields in arrays in mongoose

const PostSchema = new mongoose.Schema({ title: { type: String, }, text: { type: String, required: true, } postedBy: { type: mongoose.Schema.ObjectId, ref: "User", } likes: [{ type: mongoose.Schema.ObjectId, ref: " ...

Ways to alter the default background color in material-ui

I am currently working on creating a dashboard for my company and I am looking to modify the default styles of some material components. Specifically, I want to change the background color of the Paper component without having to add my style to each ind ...

Error: An issue occurred in the driver.execute_script function causing a JavascriptException. The error message indicates

When attempting to run some JavaScript code on the Chrome driver, I encountered a JavascriptException. Despite my confidence in the correctness of the JS code, the following error message was displayed: raise exception_class(message, screen, stacktrace) s ...

Steps to refresh a variable when the SMS read plugin successfully completes

I'm attempting to make a post call within the success callback of my SMS read plugin code. I can successfully print _this.otpnumber in the console. Please refer to my stack trace image link getSMS(){ var _this= this; var fil ...

The AngularJS API now includes the ability to store both the new and old values when saving

My goal is to enhance functionality by capturing both the old value and new value from the client side and saving them in separate tables using my API. For example, if a user changes their FirstName from 'aaa' to 'ccc' and their LastNa ...

Revise the form used to edit data stored in Vuex and accessed through computed properties

My form component is used for client registration and editing purposes. Upon creation of the form component, I check if there is an ID in the URL to determine which type of form to display. If no ID is present (indicating a new client registration), all fi ...

Parsing the CSV file contents according to the specified columns

Currently, I'm involved in a project using AngularJS where I need to extract data from a CSV file column by column using JavaScript. So far, I've successfully retrieved the CSV data and displayed it in the console. While I've managed to sepa ...