Rendering in ThreeJS Causes IE11 to Crash

I encountered a peculiar issue with Internet Explorer 11 while working on WebGL programming. Everything was functioning smoothly in all browsers until, out of the blue, IE started crashing when altering the positions of 4 meshes, without pointing to any specific code error in debug mode.

My IE 11 setup:

GL Version - WebGL 0.93

Shading Language Version - WebGL GLSL ES 0.93

The error message received was: Unhandled exception at 0x03F6435B (mshtml.dll) in iexplore.exe: 0xC0000005: Access violation writing location 0xBF35051C.

(5 last) Call Stack:

mshtml.dll!CMarkupPointer::RemoveMeFromList(void) Unknown mshtml.dll!

CBackgroundInfo::Property<class CBackgroundImage>(int)'::
7'::`dynamic atexit destructor for 'fieldDefaultValue''(void) Unknown mshtml.dll!CMarkupPointer::MoveToPointer(class CMarkupPointer const *) Unknown mshtml.dll!CDisplayPointer::MoveToPointer(class CDisplayPointer *) Unknown mshtml.dll!CSelectTracker::DoSelection(class CEditEvent *,int,int *) Unknown

This is the code responsible for creating the meshes:

function PrepareFlowArrows(l_vDiffuser) {
    var m_vExtraLoader = new THREE.JSONLoader();
    m_vExtraLoader.load('3D_Control/models/FlowArrow.js', callbackLoadFlowArrows(l_vDiffuser));
}

// Callback function for loading FlowArrows models
function callbackLoadFlowArrows(l_vDiffuser) {
    return function (geometry) {
        var l_vRotation = 0;
        for (var i = 0; i < 4; i++) {
            if (i == 0)
                l_vRotation = -1.5707; 
            else if (i == 1)
                l_vRotation = 3.1414;
            else if (i == 2)
                l_vRotation = 1.5707;
            else
                l_vRotation = 0;

            var l_vMaterial = new THREE.MeshBasicMaterial();                      
            l_vMaterial.color.r = 0;
            l_vMaterial.color.g = 255;
            l_vMaterial.color.b = 0;

            var m_vTempFlowArrowMesh = new THREE.Mesh(geometry, l_vMaterial);
            m_vTempFlowArrowMesh.scale.x = m_vTempFlowArrowMesh.scale.y = m_vTempFlowArrowMesh.scale.z *= 25;
            m_vTempFlowArrowMesh.position.set(0, 0, 0);
            m_vTempFlowArrowMesh.rotation.y = l_vRotation;
            l_vDiffuser.AddFlowArrow(m_vTempFlowArrowMesh);
            m_vScene.add(m_vTempFlowArrowMesh);
        }
    }
}

However, the code snippet below causes IE11 to crash when Render(); is triggered, and the meshes become visible:

this.UpdateFlowArrows = function () {
    this.GetBoundingBox();
    if (m_vFlowArrows[0] != null) {
        m_vFlowArrows[0].position.x = m_vBoundingBox.min.x - 100;
        m_vFlowArrows[0].position.y = m_vBoundingBox.min.y + ((m_vBoundingBox.max.y - m_vBoundingBox.min.y) / 2);
        m_vFlowArrows[0].position.z = m_vBoundingBox.min.z + ((m_vBoundingBox.max.z - m_vBoundingBox.min.z) / 2);
        //m_vFlowArrows[0].rotation.y = -1.5707;
    }

    if (m_vFlowArrows[1] != null) {
        m_vFlowArrows[1].position.x = m_vBoundingBox.min.x + ((m_vBoundingBox.max.x - m_vBoundingBox.min.x) / 2);
        m_vFlowArrows[1].position.y = m_vBoundingBox.min.y + ((m_vBoundingBox.max.y - m_vBoundingBox.min.y) / 2);
        m_vFlowArrows[1].position.z = m_vBoundingBox.min.z - 100;
        //m_vFlowArrows[1].rotation.y = 3.1414;
    }

    if (m_vFlowArrows[2] != null) {
        m_vFlowArrows[2].position.x = m_vBoundingBox.max.x + 100;
        m_vFlowArrows[2].position.y = m_vBoundingBox.max.y - ((m_vBoundingBox.max.y - m_vBoundingBox.min.y) / 2);
        m_vFlowArrows[2].position.z = m_vBoundingBox.max.z - ((m_vBoundingBox.max.z - m_vBoundingBox.min.z) / 2);
        //m_vFlowArrows[0].rotation.y = 1.5707;
    }

    if (m_vFlowArrows[3] != null) {
        m_vFlowArrows[3].position.x = m_vBoundingBox.max.x - ((m_vBoundingBox.max.x - m_vBoundingBox.min.x) / 2);
        m_vFlowArrows[3].position.y = m_vBoundingBox.max.y - ((m_vBoundingBox.max.y - m_vBoundingBox.min.y) / 2);
        m_vFlowArrows[3].position.z = m_vBoundingBox.max.z + 100;
        //m_vFlowArrows[3].rotation.y = 1.5707;
    }
}

Interestingly, adding the line

 m_vTempFlowArrowMesh.visible = false;

within the callbackLoadFlowArrows method prevents the crash, even though the arrows still update.

Answer №1

The IE team is struggling to replicate this error, despite my efforts.

I've provided them with massive crash dump files totaling 3x800mb, along with detailed information about the IE client, but they still can't pinpoint the issue.

As a result, they have deemed this issue irrelevant and closed it without resolution.

Disappointing outcome, Microsoft.

sigh

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

clearing all input fields upon submission in React Native

I need help resolving an error that occurs when I try to clear text input fields on a button press. Instead of clearing the fields, it throws an undefined error because I am trying to set the value as {this.state.inputTextValue} and then clear it using set ...

Highcharts: Including plotlines in the legend

I need to include a plotline in the legend. Check out my example here. $('#container').highcharts({ xAxis: { tickInterval: 24 * 3600 * 1000, // one day type: 'datetime' }, yAxis: { plotLines: ...

What could be causing the "undefined property read" error even though the data is clearly defined?

export async function getPrices() { const res = await fetch( "https://sandbox.iexapis.com/stable/crypto/BTCUSD/price?token=Tpk_1d3fd3aee0b64736880534d05a084290" ); const quote = await res.json(); return { props: { quote } }; } export de ...

Show pagination control only when there are multiple pages in AngularJS using ui-bootstrap

Currently, I am working with ui-bootstrap pagination and facing an issue where the pagination controls are still visible even when all the results are displayed on a single page. A quick glance at the image below confirms this problem. It seems like a basi ...

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...

Tips for fetching form data transmitted via HTTPS in Node.js?

As someone new to back-end security, I'm hoping for some guidance without judgement: When receiving values over HTTP in my node application, the form data is easily accessible in the request object using req.body.{name of input element} However, whe ...

Develop the 3D structure of a building using three.js to establish the foundation area

After sharing my previous post last week on how to programmatically create a plane from dataset in three.js, I am reaching out to the community again to solve an issue regarding defining the surface area occupied by a 3D building on the ground. While the s ...

There seems to be an issue with node.js - headers cannot be set after they have already been sent to

As I work on developing my blog, I've encountered an issue with rendering different paths using the router parameter. Each time I attempt to display another route, an error surfaces. Unfortunately, I'm unable to provide more details at this momen ...

A solution for optimizing accessibility by concealing anchor outlines in Internet Explorer and Firefox

Initially, I want to clarify that I acknowledge the fact that removing outlines impairs keyboard navigation. In contrast to Internet Explorer and Firefox, Google Chrome handles this issue by displaying outlines exclusively when the user interacts with the ...

How can I ensure that $routeProvider functions correctly within my AngularJS application?

I'm currently in the process of manually constructing a shell and trying to understand its functionality Shell Structure: - application (contains PHP files) - webroot -- app --- app.js -- templates --- main ---- login ----- login.html index.html ...

When a div is modified through an ajax function, I aim to activate a JavaScript function

Is there a way to automatically execute a javascript function once the status updates to "Upload successful"? I am uncertain about how to accomplish this task. Following a multi file upload, the status will switch based on whether it was successful or en ...

The latest alpha version of Angular2 Material Design (alpha.9-3) encountered a "404 not found" error when trying to access @angular

After carefully following the steps outlined in the angular material2 Getting Started guide to install @angular/material, I made updates to package.json, app.module, and systemjs.config using Atom. Specifically, I added the line '@angular/material&apo ...

The FlatList component will only trigger a re-render once the list has been scrolled

I need help with updating a FlatList in my app. Currently, the list is populated by an array stored in the component's state and can be filtered using a filtering function that updates the state with a new filtered array. However, I have noticed that ...

What is the method for shifting the expansion panel icon position to the left?

I need the expansion arrow in my app to be on the left side of the panel. However, it currently appears on the right side by default. This is what I have tried: <ExpansionPanelSummary className={classes.panelSummary} expandIcon={<ExpandMore ...

I'm having trouble with my .Refine feature when attempting to create a conditional input field. Can anyone help troubleshoot this issue?

I devised a feature in my form that generates additional input fields if the user selects 'yes'. How can I make these input fields mandatory and display a warning message when 'yes' is selected? const FormSchema = z.object({ type: z.e ...

adjusting the height of a div using jQuery UI's layout feature

Recently, I have been playing around with the adjustable grids plugin (jquery ui layout) to set the width of each div using the plugins. However, I've encountered a challenge when it comes to adjusting the height of inner divs within the layout. Speci ...

How to pass property data between sibling components in Vue 2

I am facing a situation with two components - Header.vue and Sidebar.vue In Header.vue, there is a button that when clicked should change the value of a property in Sidebar.vue The template code in Header.vue looks like this: <a v-on:click="toggl ...

Accessing a variable from one function within another function in Vue

How can I access and utilize the ctx variable from the initGrid() function in the drawGrid() function? Despite trying to use "this," it seems that the variable cannot be accessed within the drawGrid() function. <script> export default { data: ( ...

Ways to adjust the size of div and its elements to fit the window dimensions

When resizing the window, the banner image shrinks while the header and header items remain the same size. However, there is an issue when the header takes up around 30% of the screen in phone view. Here is the CSS code I am using: .headerdiv{ width: ...

After mapping in JavaScript, delete the property name

Is there a way to exclude the property name from the returned value? I want to eliminate the property name "projects: [ ]" from the output. router.get("/", (req, res, next) => { Project.find() .exec() .then(docs => { res.status(200) ...