Runtime SVG nodes and IE Security Error

[saadfaisal]

Hi

So for the Runtime SVG nodes, i convert the SVG nodes to PNG and create TextureMaps out of it. This render properly in both Firefox and Chrome however IE-11 crashes with a Security Error on the following line

        this.renderer.render(this.scene, this.camera);

in

JSM.ThreeViewer.prototype.Draw = function () {
    if (this.enableDraw) {
        null !== this.runBeforeRender && this.runBeforeRender();
        this.camera.position.set(this.cameraMove.eye.x, this.cameraMove.eye.y, this.cameraMove.eye.z);
        this.camera.up.set(this.cameraMove.up.x, this.cameraMove.up.y, this.cameraMove.up.z);
        this.camera.lookAt(new THREE.Vector3(this.cameraMove.center.x, this.cameraMove.center.y, this.cameraMove.center.z));
        var a = (new THREE.Vector3).subVectors(this.cameraMove.eye, this.cameraMove.center);
        this.directionalLight.position.set(a.x, a.y, a.z);
        this.renderer.render(this.scene, this.camera);
        null !== this.runAfterRender && this.runAfterRender();
        this.drawLoop && requestAnimationFrame(this.Draw.bind(this));
    }

upon some investigation, i thought it could be related to the Image's crossOrigin attribute, which i did try to set to 'Anonymous' but to no avail. Here is a part of the code that i am using to generate this texture image

        var image = document.createElement( 'img' );
        image.crossOrigin = 'Anonymous';
        var mapSprite = new THREE.Texture( image );
        mapSprite.needsUpdate = true;

        $(image).load(function() {

            var material = new THREE.MeshBasicMaterial( { map: mapSprite, transparent: true } );

            var bbox_head = head.geometry.boundingBox;

            var w = bbox_head.max.x - bbox_head.min.x;
            var h = bbox_head.max.z - bbox_head.min.z;

            var geo1 = new THREE.PlaneGeometry( w, h, 10 , 10 );
            var mesh = new THREE.Mesh( geo1, material);
            mesh.rotateZ(DegToRad(180));
            mesh.rotateX(DegToRad(90));

            viewer.AddMesh( mesh );
            viewer.Draw();
        });

       image.src = "data:image/svg+xml;base64,........";

any ideas or suggestions ?

[kovacsv]

Unfortunately I have no idea what is the problem, but it does not seem a JSModeler specific issue. I would try to display the image in an image tag, or use the image with Three.js without JSModeler to detect where the real problem is.

[saadfaisal]

I seems to be seeing some posts that says that instead of WebGL switching to CanvasRenderer can possibly resolve this issue. Is there a way that i can switch between the two in JSModeler ?

[kovacsv]

Currently JSModeler supports only WebGLRenderer. If you would like to use CanvasRenderer, currently you have to write your own viewer for it. (By the way I don't recommend you to use CanvasRenderer because it is much slower, and uglier.)

[saadfaisal]

ok thanks