How can I render 400000 polygons mesh?

Questions
,
1

hello everyone

I need to draw 400000 2D polygons of different shapes, displaying only the borders. when I render around 200000 mesh, the browser’s memory usage is greater than 12GB, and a memory overflow error is reported.

How can I render 400000 polygons and support single and multiple selection to modify a single mesh?

thank you

Here is my demo！

import React, {Component} from 'react';
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import { SimplifyModifier } from 'three/examples//jsm/modifiers/SimplifyModifier.js';
import {AxesHelper} from "three";
import {data,data1,data2,data3} from './2.js';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
        this.scene = null;
        this.mesh = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.scale = 1;
        this.stats = null;
        this.selectionBox = null;
        this.selectionHelper = null;
        this.selectedMaterial = new THREE.LineBasicMaterial( { color: 0xff0000 } );
        this.next_positions_index = 0;
        this.indices = [];
        this.parent_node = null;
        this.positions = [];
        this.colors = [];
        this.rangle = 60 * Math.PI / 180.0;
        this.iteration_count = 4;
        this.defColor = 0.2;
        this.randerStop = false;
        this.newRender = true;
        this.result = [];
        this.curIndex = 0;
        this.totalNumber = 400000;
        this.randerOnece = 5000;
        this.geometryMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff*Math.random(),
             side: THREE.DoubleSide ,
             opacity:0,
             transparent:true});
        this.LineMaterials = [];
        this.modifier = new SimplifyModifier();
        this.meshs = [];
    }

   //Initialize
    initThree = ()=>{
        
        this.container = document.getElementById( 'canvas-frame' );

        // SCENE
        this.scene = new THREE.Scene();
      
        //Orthographic camera settings
        const s = 1; //3D scene display range control coefficient, the larger the coefficient, the larger the display range
        const k = this.container.clientWidth / this.container.clientHeight; // Window aspect ratio
        // Create an orthographic camera
        this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.1, 1000);
        this.camera.position.set(0, 0, 1); //Set camera position
        this.camera.lookAt(new THREE.Vector3(0, 0, 0)); //Set camera direction (pointing to scene objects)
        this.scene.add(this.camera);
        // Creating a Renderer
        this.renderer = new THREE.WebGLRenderer({
            antialias: false,
            alpha: false,//controls the default clear alpha value.
            preserveDrawingBuffer: false,//
            precision:"lowp",
            premultipliedAlpha:false
            stencil:false,
            powerPreference:"low-power",
            depth:false,
        });

        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight) ;// Set the rendering area size
        this.renderer.setPixelRatio( window.devicePixelRatio);                        
        this.renderer.setClearColor(0x000000, 1) ;
        this.renderer.capabilities.isWebGL2 = true;
        this.renderer.debug.checkShaderErrors = false;
        this.container.appendChild(this.renderer.domElement);
        this.controls = new OrbitControls(this.camera,this.renderer.domElement);
        this.controls.enableRotate = false;
       
        this.controls.addEventListener('change', this.renderImage.bind(this));
       
        let ambientLight = new THREE.AmbientLight(0xffffff); 
        this.scene.add(ambientLight); 

        this.renderObjects();
  }

    renderObjects() {    
        let num = Math.ceil(this.totalNumber / this.randerOnece);
        for(let i = 0;i<num;i++){
            let m = {start:i*this.randerOnece, end:(i+1)*this.randerOnece};
            this.result.push(m);
        }       
       
        if(this.result.length === 0)
            return;
        
        for(let k = 0;k<10;k++){
            this.LineMaterials.push(new THREE.LineBasicMaterial({color: 0xffffff*Math.random()}));
        }

        this.doTimeout();
    }
    //Time sharing loading
    doTimeout(){
      
        if(this.curIndex < this.result.length)
        {
            if(this.randerStop)
                return;
          
            //randerStop As a global variable, if the next rendering starts, the previous rendering is marked as true and forcibly interrupted
            let onceRenderObjects = this.result[this.curIndex];
           
            this.SimplifyModifier_renderObjects(onceRenderObjects); 
            this.curIndex ++ ;         
            setTimeout(this.doTimeout.bind(this),1);//准备下一批渲染
        }        
    }

    //graphic rendering
    SimplifyModifier_renderObjects = (onceRenderObjects) => {
      
        if (onceRenderObjects === null || onceRenderObjects.length === 0)
            return;
        this.randerStop = true;
        for (let i = onceRenderObjects.start; i < onceRenderObjects.end; i++) {
            let k = Math.random() * 4;
            let pox = Math.random() * 10;
            let poy = Math.random() * 10;
            let scale = 0.05;
            let shape = null;

            if (k < 1) {
                pox = Math.random() * 30;
                poy = Math.random() * 30;
                shape = this.addShapePolygon(data, pox, poy);                
            }
            else if (k < 2) {
                scale = 0.04;
                pox = Math.random() * (-30);
                poy = Math.random() * 30;
                shape = this.addShapePolygon(data3, pox, poy);     
            }
            else if (k < 3) {
                pox = Math.random() * (-30);
                poy = Math.random() * (-30);
                shape = this.addShapePolygon(data1, pox, poy);             
            }
            else {
                pox = Math.random() * (30);
                poy = Math.random() * (-30);
                scale = 0.04
                shape = this.addShapePolygon(data2, pox, poy);    
            }

            let m = Math.random() * 9;
            let mi = Math.floor(m);
            let edgesMtl = this.LineMaterials[mi];

            let geometry = new THREE.ShapeGeometry(shape,1);
            let mesh = new THREE.Mesh(geometry, this.geometryMaterial);                
            // 
            let cubeEdges = new THREE.EdgesGeometry(geometry, 2);
            let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);
            mesh.add(cubeLine);
                 
            mesh.scale.x = scale;
            mesh.scale.y = scale;
            mesh.scale.z = scale;
            this.scene.add(mesh);           
        }
        this.renderImage();
        this.randerStop = false;
    }

    //draw a polygon
    addShapePolygon = (data,pox,poy)=>{
        let points = [];
        for(let k = 0;k<data.length;k++){
            points.push(new THREE.Vector3(data[k].POS_X+pox,data[k].POS_Y+poy,0))
        }
        const  rectShape = new THREE.Shape();
        rectShape.setFromPoints(points);
        return rectShape;       
    };
   
    renderImage =() =>{       
        this.renderer.render(this.scene, this.camera);
    };

    componentDidMount() {

        this.initThree();    
    }

    render() {
        return (
            <div>
                <div
                    id="canvas-frame"
                    style={{width: '1525px', height: '800px'}}
                    ref={(mount) => {
                        this.mount = mount
                    }}
                />               
            </div>

        )
    };
}

export default Index;
2

Just out of curiousity, how does the current result look like?

Looking at this:

            let geometry = new THREE.ShapeGeometry(shape,1);
            let mesh = new THREE.Mesh(geometry, this.geometryMaterial);                
            // 
            let cubeEdges = new THREE.EdgesGeometry(geometry, 2);
            let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);
            mesh.add(cubeLine);
                 
            mesh.scale.x = scale;
            mesh.scale.y = scale;
            mesh.scale.z = scale;
            this.scene.add(mesh);

you’ve got a bunch of outlined shapes :thinking:

3

Yes,I need draw outlined shapes,The current results seem very unsatisfactory。when draw 200000 mesh,'out of memory ’ happened

4

Any chance to provide a screenshot of the result you have now?

5

image
image1396×811 117 KB

this image I draw 10000 meshes

6

Do these shapes have the same amount of vertices per each?

And if you want just outline of shapes, why do you use meshes with lines, instead of having lines only?

7

The number of vertices in my actual data is different，these shapes only is a demo

8

Because I need to make a click selection. If I just draw a line, the click selection can only be around the line, and if it is within the shape, it cannot be selected

9

Then I would try to combine merging of geometries with GPU selection. This is for selection of a single shape.
It’ll work for those shapes that drawn atop of the others. :thinking:

10

Sorry, I don’t quite understand what you mean. I have done a merge operation before, but an error was reported during the merge. It seems that there was an error in the grid where the lines were drawn. Then, after the merge, how can I perform a single selection operation?

11

Keep information of shapes (start vertex index, amount of vertices, position) in an array, for example. Getting an index of a shape, look up the array, performing the actions you want (change color, position etc.)

GPU selection: three.js examples

1 Like
12

funny thing this example does not work for me :sweat_smile: some random cube flickers sometimes.

1 Like
13

ha! true :laughing: I’ve got the same result.

14

probably new color management issue. @Mugen87 save the day!

15

Sorry for the breakage!

16

@q983288347
To give an advice is very easy :slight_smile:
What I was saying about is kind of a “batching”, when you merge geometries, keep info about them in an array.
I rethought the idea. Now it’s about instancing, when you have several objects of InstancedBufferGeometries (two geometries per figure, one for its shape (triangulated), another one for its contour (line segments).
How to make them to act as a single object? Here come DataTextures, that hold info about position and color (for GPU picking of triangulated shapes).

Video:

Demo: https://codepen.io/prisoner849/full/rNqwqJR

2 Likes
17

This demo looks great, I’ll give it a try.

Thank you very much!

18

For three. js, I am a beginner. Thank you for providing the demo

19

I used your demo to replace the data with my own, and the result shows that the polygon is not closed。

image
image1412×342 8.84 KB

I have a question about this, how are the faces and outline calculated in the demo?

I’m just drawing polygons in a 2D plane.

Here are my data and my calculation method

const data =[
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 1,
        POS_X: 0.085000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 2,
        POS_X: 0.089000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 3,
        POS_X: 0.089000,
        POS_Y: 0.037000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 4,
        POS_X: 0.089000,
        POS_Y: 0.030000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 5,
        POS_X: 0.087000,
        POS_Y: 0.022000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 6,
        POS_X: 0.086000,
        POS_Y: 0.015000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 7,
        POS_X: 0.083000,
        POS_Y: 0.008000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 8,
        POS_X: 0.080000,
        POS_Y: 0.001000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 9,
        POS_X: 0.077000,
        POS_Y: -0.006000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 10,
        POS_X: 0.073000,
        POS_Y: -0.012000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 11,
        POS_X: 0.068000,
        POS_Y: -0.018000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 12,
        POS_X: 0.063000,
        POS_Y: -0.023000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 13,
        POS_X: 0.058000,
        POS_Y: -0.029000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 14,
        POS_X: 0.052000,
        POS_Y: -0.033000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 15,
        POS_X: 0.045000,
        POS_Y: -0.037000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 16,
        POS_X: 0.039000,
        POS_Y: -0.041000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 17,
        POS_X: 0.032000,
        POS_Y: -0.044000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 18,
        POS_X: 0.025000,
        POS_Y: -0.046000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 19,
        POS_X: 0.017000,
        POS_Y: -0.048000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 20,
        POS_X: 0.010000,
        POS_Y: -0.049000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 21,
        POS_X: 0.003000,
        POS_Y: -0.050000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 22,
        POS_X: -0.005000,
        POS_Y: -0.049000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 23,
        POS_X: -0.012000,
        POS_Y: -0.049000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 24,
        POS_X: -0.020000,
        POS_Y: -0.047000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 25,
        POS_X: -0.027000,
        POS_Y: -0.045000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 26,
        POS_X: -0.034000,
        POS_Y: -0.043000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 27,
        POS_X: -0.041000,
        POS_Y: -0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 28,
        POS_X: -0.047000,
        POS_Y: -0.036000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 29,
        POS_X: -0.054000,
        POS_Y: -0.032000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 30,
        POS_X: -0.059000,
        POS_Y: -0.027000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 31,
        POS_X: -0.065000,
        POS_Y: -0.022000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 32,
        POS_X: -0.070000,
        POS_Y: -0.016000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 33,
        POS_X: -0.074000,
        POS_Y: -0.010000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 34,
        POS_X: -0.078000,
        POS_Y: -0.004000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 35,
        POS_X: -0.081000,
        POS_Y: 0.003000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 36,
        POS_X: -0.084000,
        POS_Y: 0.010000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 37,
        POS_X: -0.086000,
        POS_Y: 0.017000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 38,
        POS_X: -0.088000,
        POS_Y: 0.025000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 39,
        POS_X: -0.089000,
        POS_Y: 0.032000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 40,
        POS_X: -0.089000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 41,
        POS_X: -0.085000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 42,
        POS_X: -0.085000,
        POS_Y: 0.050000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 43,
        POS_X: -0.065000,
        POS_Y: 0.050000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 44,
        POS_X: -0.065000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 45,
        POS_X: -0.061000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 46,
        POS_X: -0.060000,
        POS_Y: 0.032000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 47,
        POS_X: -0.059000,
        POS_Y: 0.025000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 48,
        POS_X: -0.057000,
        POS_Y: 0.018000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 49,
        POS_X: -0.054000,
        POS_Y: 0.011000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 50,
        POS_X: -0.050000,
        POS_Y: 0.004000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 51,
        POS_X: -0.045000,
        POS_Y: -0.001000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 52,
        POS_X: -0.040000,
        POS_Y: -0.007000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 53,
        POS_X: -0.034000,
        POS_Y: -0.011000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 54,
        POS_X: -0.027000,
        POS_Y: -0.015000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 55,
        POS_X: -0.020000,
        POS_Y: -0.018000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 56,
        POS_X: -0.013000,
        POS_Y: -0.020000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 57,
        POS_X: -0.006000,
        POS_Y: -0.021000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 58,
        POS_X: 0.002000,
        POS_Y: -0.021000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 59,
        POS_X: 0.009000,
        POS_Y: -0.021000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 60,
        POS_X: 0.017000,
        POS_Y: -0.019000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 61,
        POS_X: 0.024000,
        POS_Y: -0.016000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 62,
        POS_X: 0.031000,
        POS_Y: -0.013000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 63,
        POS_X: 0.037000,
        POS_Y: -0.009000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 64,
        POS_X: 0.042000,
        POS_Y: -0.004000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 65,
        POS_X: 0.047000,
        POS_Y: 0.002000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 66,
        POS_X: 0.052000,
        POS_Y: 0.008000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 67,
        POS_X: 0.055000,
        POS_Y: 0.014000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 68,
        POS_X: 0.058000,
        POS_Y: 0.021000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 69,
        POS_X: 0.060000,
        POS_Y: 0.029000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 70,
        POS_X: 0.061000,
        POS_Y: 0.036000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 71,
        POS_X: 0.061000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 72,
        POS_X: 0.065000,
        POS_Y: 0.040000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 73,
        POS_X: 0.065000,
        POS_Y: 0.050000,
    },
    {
        ID_FRAME_INFO: 29,
        DRAW_ORDER: 74,
        POS_X: 0.085000,
        POS_Y: 0.050000,
    },
];

const data1 = [
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 1,
        POS_X: -0.050,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 2,
        POS_X: -0.050,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 3,
        POS_X: -0.052,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 4,
        POS_X: -0.054,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 5,
        POS_X: -0.056,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 6,
        POS_X: -0.058,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 7,
        POS_X: -0.060,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 8,
        POS_X: -0.062,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 9,
        POS_X: -0.064,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 10,
        POS_X: -0.066,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 11,
        POS_X: -0.068,
        POS_Y: -0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 12,
        POS_X: -0.070,
        POS_Y: -0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 13,
        POS_X: -0.072,
        POS_Y: -0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 14,
        POS_X: -0.074,
        POS_Y: -0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 15,
        POS_X: -0.076,
        POS_Y: -0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 16,
        POS_X: -0.077,
        POS_Y: -0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 17,
        POS_X: -0.079,
        POS_Y: -0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 18,
        POS_X: -0.081,
        POS_Y: -0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 19,
        POS_X: -0.083,
        POS_Y: -0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 20,
        POS_X: -0.085,
        POS_Y: -0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 21,
        POS_X: -0.087,
        POS_Y: -0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 22,
        POS_X: -0.089,
        POS_Y: -0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 23,
        POS_X: -0.091,
        POS_Y: -0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 24,
        POS_X: -0.092,
        POS_Y: -0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 25,
        POS_X: -0.094,
        POS_Y: -0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 26,
        POS_X: -0.096,
        POS_Y: -0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 27,
        POS_X: -0.098,
        POS_Y: -0.113
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 28,
        POS_X: -0.099,
        POS_Y: -0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 29,
        POS_X: -0.101,
        POS_Y: -0.111
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 30,
        POS_X: -0.103,
        POS_Y: -0.110
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 31,
        POS_X: -0.105,
        POS_Y: -0.109
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 32,
        POS_X: -0.106,
        POS_Y: -0.108
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 33,
        POS_X: -0.108,
        POS_Y: -0.106
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 34,
        POS_X: -0.109,
        POS_Y: -0.105
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 35,
        POS_X: -0.111,
        POS_Y: -0.104
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 36,
        POS_X: -0.113,
        POS_Y: -0.103
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 37,
        POS_X: -0.114,
        POS_Y: -0.101
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 38,
        POS_X: -0.116,
        POS_Y: -0.100
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 39,
        POS_X: -0.117,
        POS_Y: -0.099
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 40,
        POS_X: -0.119,
        POS_Y: -0.098
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 41,
        POS_X: -0.120,
        POS_Y: -0.096
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 42,
        POS_X: -0.121,
        POS_Y: -0.095
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 43,
        POS_X: -0.123,
        POS_Y: -0.093
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 44,
        POS_X: -0.124,
        POS_Y: -0.092
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 45,
        POS_X: -0.126,
        POS_Y: -0.090
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 46,
        POS_X: -0.127,
        POS_Y: -0.089
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 47,
        POS_X: -0.128,
        POS_Y: -0.087
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 48,
        POS_X: -0.129,
        POS_Y: -0.086
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 49,
        POS_X: -0.130,
        POS_Y: -0.084
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 50,
        POS_X: -0.132,
        POS_Y: -0.082
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 51,
        POS_X: -0.133,
        POS_Y: -0.081
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 52,
        POS_X: -0.134,
        POS_Y: -0.079
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 53,
        POS_X: -0.135,
        POS_Y: -0.077
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 54,
        POS_X: -0.136,
        POS_Y: -0.076
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 55,
        POS_X: -0.137,
        POS_Y: -0.074
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 56,
        POS_X: -0.138,
        POS_Y: -0.072
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 57,
        POS_X: -0.139,
        POS_Y: -0.071
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 58,
        POS_X: -0.140,
        POS_Y: -0.069
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 59,
        POS_X: -0.141,
        POS_Y: -0.067
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 60,
        POS_X: -0.141,
        POS_Y: -0.065
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 61,
        POS_X: -0.142,
        POS_Y: -0.063
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 62,
        POS_X: -0.143,
        POS_Y: -0.061
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 63,
        POS_X: -0.144,
        POS_Y: -0.060
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 64,
        POS_X: -0.144,
        POS_Y: -0.058
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 65,
        POS_X: -0.145,
        POS_Y: -0.056
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 66,
        POS_X: -0.146,
        POS_Y: -0.054
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 67,
        POS_X: -0.146,
        POS_Y: -0.052
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 68,
        POS_X: -0.147,
        POS_Y: -0.050
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 69,
        POS_X: -0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 70,
        POS_X: -0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 71,
        POS_X: -0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 72,
        POS_X: -0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 73,
        POS_X: -0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 74,
        POS_X: -0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 75,
        POS_X: -0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 76,
        POS_X: -0.174,
        POS_Y: 0.065
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 77,
        POS_X: -0.174,
        POS_Y: 0.066
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 78,
        POS_X: -0.175,
        POS_Y: 0.067
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 79,
        POS_X: -0.175,
        POS_Y: 0.068
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 80,
        POS_X: -0.175,
        POS_Y: 0.069
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 81,
        POS_X: -0.175,
        POS_Y: 0.070
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 82,
        POS_X: -0.175,
        POS_Y: 0.071
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 83,
        POS_X: -0.175,
        POS_Y: 0.072
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 84,
        POS_X: -0.175,
        POS_Y: 0.073
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 85,
        POS_X: -0.175,
        POS_Y: 0.074
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 86,
        POS_X: -0.175,
        POS_Y: 0.075
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 87,
        POS_X: -0.175,
        POS_Y: 0.076
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 88,
        POS_X: -0.175,
        POS_Y: 0.077
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 89,
        POS_X: -0.175,
        POS_Y: 0.078
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 90,
        POS_X: -0.175,
        POS_Y: 0.079
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 91,
        POS_X: -0.175,
        POS_Y: 0.080
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 92,
        POS_X: -0.175,
        POS_Y: 0.081
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 93,
        POS_X: -0.175,
        POS_Y: 0.082
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 94,
        POS_X: -0.174,
        POS_Y: 0.083
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 95,
        POS_X: -0.174,
        POS_Y: 0.084
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 96,
        POS_X: -0.174,
        POS_Y: 0.085
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 97,
        POS_X: -0.174,
        POS_Y: 0.086
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 98,
        POS_X: -0.174,
        POS_Y: 0.087
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 99,
        POS_X: -0.173,
        POS_Y: 0.088
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 100,
        POS_X: -0.173,
        POS_Y: 0.089
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 101,
        POS_X: -0.173,
        POS_Y: 0.090
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 102,
        POS_X: -0.172,
        POS_Y: 0.091
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 103,
        POS_X: -0.172,
        POS_Y: 0.092
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 104,
        POS_X: -0.172,
        POS_Y: 0.093
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 105,
        POS_X: -0.171,
        POS_Y: 0.094
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 106,
        POS_X: -0.171,
        POS_Y: 0.095
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 107,
        POS_X: -0.171,
        POS_Y: 0.096
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 108,
        POS_X: -0.170,
        POS_Y: 0.097
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 109,
        POS_X: -0.170,
        POS_Y: 0.098
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 110,
        POS_X: -0.169,
        POS_Y: 0.098
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 111,
        POS_X: -0.169,
        POS_Y: 0.099
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 112,
        POS_X: -0.168,
        POS_Y: 0.100
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 113,
        POS_X: -0.168,
        POS_Y: 0.101
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 114,
        POS_X: -0.167,
        POS_Y: 0.102
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 115,
        POS_X: -0.167,
        POS_Y: 0.103
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 116,
        POS_X: -0.166,
        POS_Y: 0.104
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 117,
        POS_X: -0.165,
        POS_Y: 0.104
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 118,
        POS_X: -0.165,
        POS_Y: 0.105
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 119,
        POS_X: -0.164,
        POS_Y: 0.106
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 120,
        POS_X: -0.164,
        POS_Y: 0.107
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 121,
        POS_X: -0.163,
        POS_Y: 0.108
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 122,
        POS_X: -0.162,
        POS_Y: 0.108
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 123,
        POS_X: -0.162,
        POS_Y: 0.109
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 124,
        POS_X: -0.161,
        POS_Y: 0.110
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 125,
        POS_X: -0.160,
        POS_Y: 0.110
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 126,
        POS_X: -0.160,
        POS_Y: 0.111
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 127,
        POS_X: -0.159,
        POS_Y: 0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 128,
        POS_X: -0.158,
        POS_Y: 0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 129,
        POS_X: -0.157,
        POS_Y: 0.113
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 130,
        POS_X: -0.157,
        POS_Y: 0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 131,
        POS_X: -0.156,
        POS_Y: 0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 132,
        POS_X: -0.155,
        POS_Y: 0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 133,
        POS_X: -0.154,
        POS_Y: 0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 134,
        POS_X: -0.153,
        POS_Y: 0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 135,
        POS_X: -0.153,
        POS_Y: 0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 136,
        POS_X: -0.152,
        POS_Y: 0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 137,
        POS_X: -0.151,
        POS_Y: 0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 138,
        POS_X: -0.150,
        POS_Y: 0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 139,
        POS_X: -0.149,
        POS_Y: 0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 140,
        POS_X: -0.148,
        POS_Y: 0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 141,
        POS_X: -0.147,
        POS_Y: 0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 142,
        POS_X: -0.146,
        POS_Y: 0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 143,
        POS_X: -0.145,
        POS_Y: 0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 144,
        POS_X: -0.145,
        POS_Y: 0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 145,
        POS_X: -0.144,
        POS_Y: 0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 146,
        POS_X: -0.143,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 147,
        POS_X: -0.142,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 148,
        POS_X: -0.141,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 149,
        POS_X: -0.140,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 150,
        POS_X: -0.139,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 151,
        POS_X: -0.138,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 152,
        POS_X: -0.137,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 153,
        POS_X: -0.136,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 154,
        POS_X: -0.135,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 155,
        POS_X: -0.134,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 156,
        POS_X: -0.133,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 157,
        POS_X: -0.132,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 158,
        POS_X: -0.131,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 159,
        POS_X: -0.130,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 160,
        POS_X: -0.129,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 161,
        POS_X: -0.128,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 162,
        POS_X: -0.127,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 163,
        POS_X: -0.126,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 164,
        POS_X: -0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 165,
        POS_X: -0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 166,
        POS_X: -0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 167,
        POS_X: 0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 168,
        POS_X: 0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 169,
        POS_X: 0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 170,
        POS_X: 0.125,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 171,
        POS_X: 0.126,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 172,
        POS_X: 0.127,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 173,
        POS_X: 0.128,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 174,
        POS_X: 0.129,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 175,
        POS_X: 0.130,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 176,
        POS_X: 0.131,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 177,
        POS_X: 0.132,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 178,
        POS_X: 0.133,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 179,
        POS_X: 0.134,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 180,
        POS_X: 0.135,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 181,
        POS_X: 0.136,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 182,
        POS_X: 0.137,
        POS_Y: 0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 183,
        POS_X: 0.138,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 184,
        POS_X: 0.139,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 185,
        POS_X: 0.140,
        POS_Y: 0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 186,
        POS_X: 0.141,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 187,
        POS_X: 0.142,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 188,
        POS_X: 0.143,
        POS_Y: 0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 189,
        POS_X: 0.144,
        POS_Y: 0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 190,
        POS_X: 0.145,
        POS_Y: 0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 191,
        POS_X: 0.146,
        POS_Y: 0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 192,
        POS_X: 0.147,
        POS_Y: 0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 193,
        POS_X: 0.148,
        POS_Y: 0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 194,
        POS_X: 0.149,
        POS_Y: 0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 195,
        POS_X: 0.149,
        POS_Y: 0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 196,
        POS_X: 0.150,
        POS_Y: 0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 197,
        POS_X: 0.151,
        POS_Y: 0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 198,
        POS_X: 0.152,
        POS_Y: 0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 199,
        POS_X: 0.153,
        POS_Y: 0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 200,
        POS_X: 0.154,
        POS_Y: 0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 201,
        POS_X: 0.155,
        POS_Y: 0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 202,
        POS_X: 0.155,
        POS_Y: 0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 203,
        POS_X: 0.156,
        POS_Y: 0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 204,
        POS_X: 0.157,
        POS_Y: 0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 205,
        POS_X: 0.158,
        POS_Y: 0.113
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 206,
        POS_X: 0.158,
        POS_Y: 0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 207,
        POS_X: 0.159,
        POS_Y: 0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 208,
        POS_X: 0.160,
        POS_Y: 0.111
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 209,
        POS_X: 0.161,
        POS_Y: 0.110
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 210,
        POS_X: 0.161,
        POS_Y: 0.109
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 211,
        POS_X: 0.162,
        POS_Y: 0.109
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 212,
        POS_X: 0.163,
        POS_Y: 0.108
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 213,
        POS_X: 0.163,
        POS_Y: 0.107
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 214,
        POS_X: 0.164,
        POS_Y: 0.106
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 215,
        POS_X: 0.165,
        POS_Y: 0.106
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 216,
        POS_X: 0.165,
        POS_Y: 0.105
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 217,
        POS_X: 0.166,
        POS_Y: 0.104
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 218,
        POS_X: 0.166,
        POS_Y: 0.103
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 219,
        POS_X: 0.167,
        POS_Y: 0.102
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 220,
        POS_X: 0.167,
        POS_Y: 0.102
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 221,
        POS_X: 0.168,
        POS_Y: 0.101
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 222,
        POS_X: 0.168,
        POS_Y: 0.100
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 223,
        POS_X: 0.169,
        POS_Y: 0.099
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 224,
        POS_X: 0.169,
        POS_Y: 0.098
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 225,
        POS_X: 0.170,
        POS_Y: 0.097
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 226,
        POS_X: 0.170,
        POS_Y: 0.096
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 227,
        POS_X: 0.171,
        POS_Y: 0.095
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 228,
        POS_X: 0.171,
        POS_Y: 0.094
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 229,
        POS_X: 0.172,
        POS_Y: 0.093
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 230,
        POS_X: 0.172,
        POS_Y: 0.093
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 231,
        POS_X: 0.172,
        POS_Y: 0.092
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 232,
        POS_X: 0.173,
        POS_Y: 0.091
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 233,
        POS_X: 0.173,
        POS_Y: 0.090
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 234,
        POS_X: 0.173,
        POS_Y: 0.089
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 235,
        POS_X: 0.173,
        POS_Y: 0.088
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 236,
        POS_X: 0.174,
        POS_Y: 0.087
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 237,
        POS_X: 0.174,
        POS_Y: 0.086
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 238,
        POS_X: 0.174,
        POS_Y: 0.085
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 239,
        POS_X: 0.174,
        POS_Y: 0.084
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 240,
        POS_X: 0.174,
        POS_Y: 0.083
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 241,
        POS_X: 0.175,
        POS_Y: 0.082
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 242,
        POS_X: 0.175,
        POS_Y: 0.081
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 243,
        POS_X: 0.175,
        POS_Y: 0.080
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 244,
        POS_X: 0.175,
        POS_Y: 0.079
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 245,
        POS_X: 0.175,
        POS_Y: 0.078
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 246,
        POS_X: 0.175,
        POS_Y: 0.077
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 247,
        POS_X: 0.175,
        POS_Y: 0.076
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 248,
        POS_X: 0.175,
        POS_Y: 0.075
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 249,
        POS_X: 0.175,
        POS_Y: 0.074
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 250,
        POS_X: 0.175,
        POS_Y: 0.073
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 251,
        POS_X: 0.175,
        POS_Y: 0.072
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 252,
        POS_X: 0.175,
        POS_Y: 0.071
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 253,
        POS_X: 0.175,
        POS_Y: 0.070
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 254,
        POS_X: 0.175,
        POS_Y: 0.069
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 255,
        POS_X: 0.175,
        POS_Y: 0.068
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 256,
        POS_X: 0.174,
        POS_Y: 0.067
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 257,
        POS_X: 0.174,
        POS_Y: 0.066
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 258,
        POS_X: 0.174,
        POS_Y: 0.065
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 259,
        POS_X: 0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 260,
        POS_X: 0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 261,
        POS_X: 0.174,
        POS_Y: 0.064
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 262,
        POS_X: 0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 263,
        POS_X: 0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 264,
        POS_X: 0.147,
        POS_Y: -0.048
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 265,
        POS_X: 0.147,
        POS_Y: -0.050
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 266,
        POS_X: 0.146,
        POS_Y: -0.052
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 267,
        POS_X: 0.146,
        POS_Y: -0.054
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 268,
        POS_X: 0.145,
        POS_Y: -0.056
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 269,
        POS_X: 0.144,
        POS_Y: -0.058
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 270,
        POS_X: 0.144,
        POS_Y: -0.059
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 271,
        POS_X: 0.143,
        POS_Y: -0.061
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 272,
        POS_X: 0.142,
        POS_Y: -0.063
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 273,
        POS_X: 0.142,
        POS_Y: -0.065
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 274,
        POS_X: 0.141,
        POS_Y: -0.067
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 275,
        POS_X: 0.140,
        POS_Y: -0.069
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 276,
        POS_X: 0.139,
        POS_Y: -0.070
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 277,
        POS_X: 0.138,
        POS_Y: -0.072
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 278,
        POS_X: 0.137,
        POS_Y: -0.074
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 279,
        POS_X: 0.136,
        POS_Y: -0.076
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 280,
        POS_X: 0.135,
        POS_Y: -0.077
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 281,
        POS_X: 0.134,
        POS_Y: -0.079
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 282,
        POS_X: 0.133,
        POS_Y: -0.081
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 283,
        POS_X: 0.132,
        POS_Y: -0.082
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 284,
        POS_X: 0.131,
        POS_Y: -0.084
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 285,
        POS_X: 0.129,
        POS_Y: -0.086
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 286,
        POS_X: 0.128,
        POS_Y: -0.087
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 287,
        POS_X: 0.127,
        POS_Y: -0.089
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 288,
        POS_X: 0.126,
        POS_Y: -0.090
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 289,
        POS_X: 0.124,
        POS_Y: -0.092
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 290,
        POS_X: 0.123,
        POS_Y: -0.093
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 291,
        POS_X: 0.122,
        POS_Y: -0.095
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 292,
        POS_X: 0.120,
        POS_Y: -0.096
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 293,
        POS_X: 0.119,
        POS_Y: -0.098
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 294,
        POS_X: 0.117,
        POS_Y: -0.099
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 295,
        POS_X: 0.116,
        POS_Y: -0.100
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 296,
        POS_X: 0.114,
        POS_Y: -0.102
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 297,
        POS_X: 0.113,
        POS_Y: -0.103
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 298,
        POS_X: 0.111,
        POS_Y: -0.104
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 299,
        POS_X: 0.110,
        POS_Y: -0.105
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 300,
        POS_X: 0.108,
        POS_Y: -0.107
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 301,
        POS_X: 0.106,
        POS_Y: -0.108
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 302,
        POS_X: 0.105,
        POS_Y: -0.109
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 303,
        POS_X: 0.103,
        POS_Y: -0.110
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 304,
        POS_X: 0.101,
        POS_Y: -0.111
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 305,
        POS_X: 0.100,
        POS_Y: -0.112
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 306,
        POS_X: 0.098,
        POS_Y: -0.113
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 307,
        POS_X: 0.096,
        POS_Y: -0.114
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 308,
        POS_X: 0.094,
        POS_Y: -0.115
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 309,
        POS_X: 0.092,
        POS_Y: -0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 310,
        POS_X: 0.091,
        POS_Y: -0.116
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 311,
        POS_X: 0.089,
        POS_Y: -0.117
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 312,
        POS_X: 0.087,
        POS_Y: -0.118
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 313,
        POS_X: 0.085,
        POS_Y: -0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 314,
        POS_X: 0.083,
        POS_Y: -0.119
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 315,
        POS_X: 0.081,
        POS_Y: -0.120
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 316,
        POS_X: 0.079,
        POS_Y: -0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 317,
        POS_X: 0.078,
        POS_Y: -0.121
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 318,
        POS_X: 0.076,
        POS_Y: -0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 319,
        POS_X: 0.074,
        POS_Y: -0.122
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 320,
        POS_X: 0.072,
        POS_Y: -0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 321,
        POS_X: 0.070,
        POS_Y: -0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 322,
        POS_X: 0.068,
        POS_Y: -0.123
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 323,
        POS_X: 0.066,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 324,
        POS_X: 0.064,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 325,
        POS_X: 0.062,
        POS_Y: -0.124
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 326,
        POS_X: 0.060,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 327,
        POS_X: 0.058,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 328,
        POS_X: 0.056,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 329,
        POS_X: 0.054,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 330,
        POS_X: 0.052,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 331,
        POS_X: 0.050,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 332,
        POS_X: 0.050,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 333,
        POS_X: 0.050,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 4,
        DRAW_ORDER: 334,
        POS_X: -0.050,
        POS_Y: -0.125
    }
];

const data2 = [
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 1,
        POS_X: 0.850,
        POS_Y: -0.075
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 2,
        POS_X: 0.850,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 3,
        POS_X: 0.845,
        POS_Y: 0.149
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 4,
        POS_X: 0.837,
        POS_Y: 0.167
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 5,
        POS_X: 0.817,
        POS_Y: 0.187
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 6,
        POS_X: 0.799,
        POS_Y: 0.195
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 7,
        POS_X: 0.775,
        POS_Y: 0.200
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 8,
        POS_X: -0.775,
        POS_Y: 0.200
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 9,
        POS_X: -0.799,
        POS_Y: 0.195
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 10,
        POS_X: -0.817,
        POS_Y: 0.187
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 11,
        POS_X: -0.837,
        POS_Y: 0.167
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 12,
        POS_X: -0.845,
        POS_Y: 0.149
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 13,
        POS_X: -0.850,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 14,
        POS_X: -0.850,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 15,
        POS_X: -0.845,
        POS_Y: -0.149
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 16,
        POS_X: -0.837,
        POS_Y: -0.167
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 17,
        POS_X: -0.817,
        POS_Y: -0.187
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 18,
        POS_X: -0.799,
        POS_Y: -0.195
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 19,
        POS_X: -0.775,
        POS_Y: -0.200
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 20,
        POS_X: 0.775,
        POS_Y: -0.200
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 21,
        POS_X: 0.799,
        POS_Y: -0.195
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 22,
        POS_X: 0.817,
        POS_Y: -0.187
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 23,
        POS_X: 0.837,
        POS_Y: -0.167
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 24,
        POS_X: 0.845,
        POS_Y: -0.149
    },
    {
        ID_FRAME_INFO: 22054,
        DRAW_ORDER: 25,
        POS_X: 0.850,
        POS_Y: -0.125
    }
]

const data3 = [
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 1,
        POS_X: 0.850,
        POS_Y: -0.075
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 2,
        POS_X: 0.850,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 3,
        POS_X: 0.845,
        POS_Y: 0.149
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 4,
        POS_X: 0.837,
        POS_Y: 0.167
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 5,
        POS_X: 0.817,
        POS_Y: 0.187
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 6,
        POS_X: 0.799,
        POS_Y: 0.195
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 7,
        POS_X: 0.775,
        POS_Y: 0.200
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 8,
        POS_X: -0.775,
        POS_Y: 0.200
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 9,
        POS_X: -0.799,
        POS_Y: 0.195
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 10,
        POS_X: -0.817,
        POS_Y: 0.187
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 11,
        POS_X: -0.837,
        POS_Y: 0.167
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 12,
        POS_X: -0.845,
        POS_Y: 0.149
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 13,
        POS_X: -0.850,
        POS_Y: 0.125
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 14,
        POS_X: -0.850,
        POS_Y: -0.125
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 15,
        POS_X: -0.845,
        POS_Y: -0.149
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 16,
        POS_X: -0.837,
        POS_Y: -0.167
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 17,
        POS_X: -0.817,
        POS_Y: -0.187
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 18,
        POS_X: -0.799,
        POS_Y: -0.195
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 19,
        POS_X: -0.775,
        POS_Y: -0.200
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 20,
        POS_X: 0.775,
        POS_Y: -0.200
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 21,
        POS_X: 0.799,
        POS_Y: -0.195
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 22,
        POS_X: 0.817,
        POS_Y: -0.187
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 23,
        POS_X: 0.837,
        POS_Y: -0.167
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 24,
        POS_X: 0.845,
        POS_Y: -0.149
    },
    {
        ID_FRAME_INFO: 22075,
        DRAW_ORDER: 25,
        POS_X: 0.850,
        POS_Y: -0.125
    }
]

export  {data,data1,data2,data3}


getPoints = (data)=>{
    let points = [];
    for (let k = 0; k < data.length; k++) {
        points.push(new THREE.Vector3(data[k].POS_X, data[k].POS_Y, 0))
    }
    return points;
}
drwaPolygin = ()=>{
    let shapes = [];
    for(let i = 0;i<4;i++){
        let points = [];
        this.positions = [];
        this.indices = [];
        if(i === 0){
            points = this.getPoints(data);                               
        }
        else if(i === 1){
            points = this.getPoints(data1);     
        }
        else if(i === 2){
            points = this.getPoints(data2);     
        }
        else{
            points = this.getPoints(data3);     
        }
        this.snowflake(_.cloneDeep(points), true);
        let trianglesIndex = Earcut.triangulate(_.cloneDeep(points), null, 3);
        shapes.push({
            points: _.cloneDeep(this.positions),
            faces: _.cloneDeep(trianglesIndex),
            outline: _.cloneDeep(this.indices)
        });
        
    }

 add_vertex(v) {
     //if (this.next_positions_index === 0xffff) console.error('Too many points.');
     this.positions.push(v.x, v.y, v.z);
     //this.colors.push(Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5);
     return this.next_positions_index++;
 }
 snowflake_iteration(p0, p4, depth) {
     if (--depth < 0) {
         const i = this.next_positions_index - 1; // p0 already there
         this.add_vertex(p4);
         this.indices.push(i, i + 1);
         return;
     }
 }
 snowflake(points, loop) {
     for (let iteration = 0; iteration !== this.iteration_count; iteration++) {
         this.add_vertex(points[0]);
         for (let p_index = 0, p_count = points.length - 1; p_index !== p_count; p_index++) {
             this.snowflake_iteration(points[p_index], points[p_index + 1], iteration);
         }
         if (loop) this.snowflake_iteration(points[points.length - 1], points[0], iteration);
     }
 }

The following image shows the effect I am displaying：

image
image1394×837 28.1 KB

20

Shapes in the demo are simple, so I just manually defined faces and line segments, knowing the order of vertices.

In your case, when you draw shapes, you can use ShapeGeometry for shapes (sorry, for tautology).
And for outlines, build an index, doubling the indices of vertices, except indices for the first and the last vertices. :thinking:

1 Like