AlexD77

Untitled

Nov 28th, 2021
34
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <!DOCTYPE html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  
  7.     <title>Babylon.js sample code</title>
  8.  
  9.     <!-- Babylon.js -->
  10.     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
  11.     <script src="https://preview.babylonjs.com/ammo.js"></script>
  12.     <script src="https://preview.babylonjs.com/cannon.js"></script>
  13.     <script src="https://preview.babylonjs.com/Oimo.js"></script>
  14.     <script src="https://preview.babylonjs.com/earcut.min.js"></script>
  15.     <script src="https://preview.babylonjs.com/babylon.max.js"></script>
  16.     <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>
  17.     <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js"></script>
  18.     <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js"></script>
  19.     <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
  20.     <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.js"></script>
  21.     <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
  22.     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
  23.  
  24.     <style>
  25.         html,
  26.         body {
  27.             overflow: hidden;
  28.             width: 100%;
  29.             height: 100%;
  30.             margin: 0;
  31.             padding: 0;
  32.         }
  33.  
  34.         #renderCanvas {
  35.             width: 100%;
  36.             height: 100%;
  37.             touch-action: none;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.     <canvas id="renderCanvas"></canvas>
  44.     <canvas id="computeCanvas"></canvas>
  45.     <textarea id="calculate">
  46.         [[block]] struct SimParams {
  47.             time: f32;
  48.             count: f32;
  49.         };
  50.  
  51.         [[binding(0), group(0)]] var<uniform> params : SimParams;
  52.  
  53.         struct Object
  54.         {
  55.             position: vec3<f32>;
  56.             collisionMark: f32;
  57.             velocity: vec3<f32>;
  58.             scaleAfterCollision: f32;
  59.             force: vec3<f32>;
  60.             disabled: f32;
  61.             mass: f32;
  62.             size: f32;
  63.             id: f32;
  64.             dummy5: f32;
  65.         };
  66.  
  67.         [[block]] struct Objects {
  68.             data : /*[[stride(64)]]*/ array<Object>;
  69.         };        
  70.  
  71.         [[binding(1), group(0)]] var<storage, read>  ssboIn : Objects;
  72.  
  73.         [[binding(2), group(0)]] var<storage, read_write> ssboOut : Objects;
  74.  
  75.         [[stage(compute), workgroup_size(WORK_GROUP_SIZE)]]
  76.         fn main([[builtin(global_invocation_id)]] GlobalInvocationID : vec3<u32>)
  77.         {
  78.             var threadIndex = GlobalInvocationID.x; // gl_WorkGroupID * gl_WorkGroupSize.x + gl_LocalInvocationID.x
  79.  
  80.             var G = 6.67408313131E-11;
  81.  
  82.             var time = params.time;
  83.             var count = u32(params.count);            
  84.  
  85.             var first = ssboIn.data[threadIndex];
  86.             if (first.disabled > 0.0)
  87.             {
  88.                 // no calculation required
  89.                 return;
  90.             }
  91.  
  92.             var m1 = first.mass;
  93.  
  94.             var forceVector = vec3<f32>(0.0, 0.0, 0.0);
  95.  
  96.             // calculate result force on all objects/planets
  97.             for (var j : u32 = 0u; j < count; j=j+1u)
  98.             {
  99.                 if (threadIndex == j)
  100.                 {
  101.                     continue;
  102.                 }
  103.  
  104.                 var second = ssboIn.data[j];
  105.                 var m2 = second.mass;
  106.                 if (second.disabled > 0.0)
  107.                 {
  108.                     // skip no mass object
  109.                     continue;
  110.                 }
  111.  
  112.                 var dist = distance(first.position, second.position);
  113.                 var distanceSquared = dist * dist;
  114.  
  115.                 if (distanceSquared > 0.0)
  116.                 {
  117.                     var force = G * m1 * m2 / distanceSquared;
  118.  
  119.                     var directionVector = normalize((second.position - first.position));
  120.  
  121.                     forceVector = forceVector + (directionVector * force);
  122.                 }
  123.             }
  124.  
  125.             // calculate new position depends on force
  126.             var a = forceVector / m1;
  127.             var v = a * time;
  128.             var s = v * time / 2.0;
  129.  
  130.             var newPosition = first.position + (first.velocity * time) + s;
  131.             ssboOut.data[threadIndex].force = forceVector;
  132.             ssboOut.data[threadIndex].mass = m1;                          
  133.             ssboOut.data[threadIndex].size = first.size;
  134.             ssboOut.data[threadIndex].position = newPosition;
  135.             ssboOut.data[threadIndex].velocity = first.velocity + v;
  136.             ssboOut.data[threadIndex].scaleAfterCollision = 0.0;
  137.             ssboOut.data[threadIndex].dummy5 = first.dummy5 + time;
  138.  
  139.             // calculate collisions
  140.             for(var j : u32 = 0u; j < count; j=j+1u)
  141.             {
  142.                 if (threadIndex == j)
  143.                 {
  144.                     continue;
  145.                 }
  146.  
  147.                 var second = ssboIn.data[j];
  148.                 var m2 = second.mass;
  149.                 if (second.disabled > 0.0)
  150.                 {
  151.                     // skip no mass object
  152.                     continue;
  153.                 }
  154.  
  155.                 // calculate collision
  156.                 var a = distance(newPosition, first.position);
  157.                 if (a > 0.0)
  158.                 {
  159.                     var b = distance(first.position, second.position);
  160.                     var c = distance(newPosition, second.position);
  161.                     var radius = (first.size + second.size) / 2.0;
  162.                     var id1 = first.id;
  163.                     var id2 = second.id;
  164.  
  165.                     if (b < radius || c < radius) {
  166.                         if (m1 > m2 || (m1 == m2 && id1 > id2)) {
  167.                             // fix  speed  v = (m1v1 + m2v2) / (m1 + m2)
  168.                             var v1 = first.velocity;
  169.                             var v2 = second.velocity;
  170.                             var vresult = (v1 * m1 + v2 * m2) / (m1 + m2);
  171.    
  172.                             var newR = pow((first.size * first.size * first.size
  173.                                             + second.size * second.size * second.size), 1.0 / 3.0);
  174.  
  175.                             // mark collision
  176.                             ssboOut.data[threadIndex].collisionMark = 123.0;
  177.                             ssboOut.data[threadIndex].velocity = vresult;  
  178.                             ssboOut.data[threadIndex].mass = m1 + m2;                          
  179.                             ssboOut.data[threadIndex].size = newR;
  180.                             ssboOut.data[threadIndex].scaleAfterCollision = newR / first.size;
  181.                         } else {
  182.                             // collision from other side
  183.                             ssboOut.data[threadIndex].collisionMark = 246.0;
  184.                             ssboOut.data[threadIndex].mass = 0.0;    
  185.                             ssboOut.data[threadIndex].velocity = vec3<f32>(0.0, 0.0, 0.0);
  186.                             ssboOut.data[threadIndex].force = vec3<f32>(0.0, 0.0, 0.0);
  187.                             ssboOut.data[threadIndex].scaleAfterCollision = 0.0;
  188.                             ssboOut.data[threadIndex].disabled = 9.0;
  189.                         }
  190.  
  191.                         // no more calculations after collision
  192.                         break;
  193.                     }
  194.                 }
  195.             }            
  196.         }
  197.     </textarea>    
  198.     <script>
  199.         var debug = false;
  200.         var worldScale = 1;
  201.         var worldToMetres = 1 / worldScale;
  202.         //var scope = 1600.0 * worldScale;
  203.         var scope = 50.0 * worldScale;
  204.         var sunZoom = 1.0;
  205.         var planetsZoom = 1.0;
  206.         var forceZoom = 1.5 * Math.pow(10, -5);
  207.         var velocityZoom = 1 * Math.pow(10, 1);
  208.  
  209.         //var iters_per_step = 60 * 60;
  210.         var iters_per_step = 1;
  211.         var t = 1; // 1 second
  212.         //var t = 0.01; // 1 second
  213.  
  214.         var G = 6.67408313131 * Math.pow(10, -11);
  215.  
  216.         class Runner {
  217.             constructor() {
  218.                 // const
  219.                 this.WORK_GROUP_SIZE = 256;
  220.                 this.dataSize = 3 + 3 + 3 + 1 + 1 + 5 /*align*/;
  221.                 this.numInstances = this.WORK_GROUP_SIZE * 10;
  222.                 //this.numInstances = 2;
  223.                 this.range = 500;
  224.                 this.numGroups = Math.ceil(this.numInstances / this.WORK_GROUP_SIZE);
  225.  
  226.                 this.canvas = document.getElementById("renderCanvas");
  227.                 this.computeCanvas = document.getElementById("computeCanvas");
  228.  
  229.                 this.planets = [];
  230.                 this.planetInitialObjects = [];
  231.  
  232.                 this.initInitialData();
  233.             }
  234.  
  235.             async init() {
  236.                 const engine = this.engine = new BABYLON.WebGPUEngine(this.canvas);
  237.                 await engine.initAsync();
  238.             }
  239.  
  240.             async initCompute() {
  241.                 const supportCS = this.engine.getCaps().supportComputeShaders;
  242.                 if (!supportCS) {
  243.                     return true;
  244.                 }
  245.  
  246.                 const computeShaderSource = document.getElementById("calculate").value.replace('WORK_GROUP_SIZE', this.WORK_GROUP_SIZE);
  247.                 this.computeShader = new BABYLON.ComputeShader("compute", this.engine, { computeSource: computeShaderSource }, {
  248.                     bindingsMapping:
  249.                     {
  250.                         "params": { group: 0, binding: 0 },
  251.                         "ssboIn": { group: 0, binding: 1 },
  252.                         "ssboOut": { group: 0, binding: 2 },
  253.                     }
  254.                 });
  255.  
  256.                 const simParamsBuffer = new BABYLON.UniformBuffer(this.engine);
  257.                 simParamsBuffer.updateFloat2("time", t, this.numInstances);
  258.                 simParamsBuffer.update();
  259.  
  260.                 const ssboInBuffer = new BABYLON.StorageBuffer(this.engine, this.ssboData.byteLength);
  261.                 ssboInBuffer.update(this.ssboData);
  262.  
  263.                 const ssboOutBuffer = new BABYLON.StorageBuffer(this.engine, this.ssboData.byteLength);
  264.  
  265.                 this.computeShader.setUniformBuffer("params", simParamsBuffer);
  266.                 this.computeShader.setStorageBuffer("ssboIn", ssboInBuffer);
  267.                 this.computeShader.setStorageBuffer("ssboOut", ssboOutBuffer);
  268.                                
  269.                 const handler = () => {
  270.                     ssboOutBuffer.read().then((res) => {
  271.                         const resFloats = new Float32Array(res.buffer);
  272.                         //console.log(resFloats);
  273.                         this.ssboData.set(resFloats);
  274.  
  275.                         ssboInBuffer.update(this.ssboData);
  276.                         this.computeShader.setStorageBuffer("ssboIn", ssboInBuffer);
  277.                         this.computeShader.dispatchWhenReady(this.numGroups).then(handler);                
  278.  
  279.                         this.loadPositions();
  280.                     });
  281.                 };
  282.  
  283.                 this.computeShader.dispatchWhenReady(this.numGroups).then(handler);                
  284.             }
  285.  
  286.             initInitialData() {
  287.                 // ssbo Data
  288.                 const ssboData = this.ssboData = new Float32Array(this.numInstances * this.dataSize);
  289.  
  290.                 this.initPlanets(ssboData);
  291.             }
  292.  
  293.             initPlanets(ssboData) {
  294.                 const count = ssboData.length / this.dataSize;
  295.                 for (let i = 0; i < count; i++) {
  296.                     const sizeObj = 5.0 * Math.random();
  297.                     const range = this.range;
  298.                     const obj = {
  299.                         name: "pl" + i,
  300.                         mass: sizeObj * 100000000, // if 2 objects collide with the same mass, it causes issue to calculation as we do not know from which side to make calculation about collision
  301.                         perihelion: range * (Math.random() - 0.5),
  302.                         aphelion: range * (Math.random() - 0.5),
  303.                         Z: range * (Math.random() - 0.5),
  304.                         size: sizeObj,
  305.                         velocity: 0,
  306.                         zoom: planetsZoom
  307.                     };
  308.  
  309.                     this.planetInitialObjects.push(obj);
  310.  
  311.                     const force = new BABYLON.Vector3(0, 0, 0);
  312.                     const position = new BABYLON.Vector3(obj.perihelion, obj.aphelion, obj.Z);
  313.                     const velocity = new BABYLON.Vector3(0, obj.velocity, 0);
  314.  
  315.                     const mass = obj.mass;
  316.                     const size = obj.size;
  317.  
  318.                     // store into buffer
  319.                     // --------------------
  320.                     // vec3 position;
  321.                     // vec3 velocity;
  322.                     // vec3 force;
  323.                     // float mass;
  324.                     // float size;                    
  325.                     let bi = i * this.dataSize;
  326.                     ssboData[bi + 0] = position.x;
  327.                     ssboData[bi + 1] = position.y;
  328.                     ssboData[bi + 2] = position.z;
  329.                     ssboData[bi + 3] = 0;
  330.  
  331.                     ssboData[bi + 4] = velocity.x;
  332.                     ssboData[bi + 5] = velocity.y;
  333.                     ssboData[bi + 6] = velocity.z;
  334.                     ssboData[bi + 7] = 0;
  335.  
  336.                     ssboData[bi + 8] = force.x;
  337.                     ssboData[bi + 9] = force.y;
  338.                     ssboData[bi + 10] = force.z;
  339.                     ssboData[bi + 11] = 0;
  340.  
  341.                     ssboData[bi + 12] = mass;
  342.                     ssboData[bi + 13] = size;
  343.                     ssboData[bi + 14] = i; // id
  344.                     ssboData[bi + 15] = 0;
  345.                 }
  346.             }
  347.  
  348.             loadPositions() {
  349.                 if (!this.ssboData || !this.ssboData.length || !this.planets || !this.planets.length) {
  350.                     return;
  351.                 }
  352.  
  353.                 let enabledCount = 0;
  354.                 const count = this.ssboData.length / this.dataSize;
  355.                 for (let i = 0; i < count; i++) {
  356.                     let bi = i * this.dataSize;
  357.                     const planet = this.planets[i];
  358.                     if (this.ssboData[bi + 11] > 0.0) {
  359.                         // mass is 0, disable shape
  360.                         planet.setEnabled(false);
  361.                         continue;
  362.                     }
  363.  
  364.                     enabledCount++;
  365.  
  366.                     planet.position.x = this.ssboData[bi + 0] / worldToMetres;
  367.                     planet.position.y = this.ssboData[bi + 2] / worldToMetres; // z
  368.                     planet.position.z = this.ssboData[bi + 1] / worldToMetres; // y
  369.  
  370.                     if (debug) {
  371.                         if (!planet.linearVelocity) {
  372.                             planet.linearVelocity = new BABYLON.Vector3(0, 0, 0);
  373.                         }
  374.  
  375.                         planet.linearVelocity.x = this.ssboData[bi + 4];
  376.                         planet.linearVelocity.y = this.ssboData[bi + 6]; // z
  377.                         planet.linearVelocity.z = this.ssboData[bi + 5]; // y
  378.  
  379.                         if (!planet.forceVector) {
  380.                             planet.forceVector = new BABYLON.Vector3(0, 0, 0);
  381.                         }
  382.  
  383.                         planet.forceVector.x = this.ssboData[bi + 8];
  384.                         planet.forceVector.y = this.ssboData[bi + 10]; // z
  385.                         planet.forceVector.z = this.ssboData[bi + 9]; // y
  386.                     }
  387.  
  388.                     const collisionMark = this.ssboData[bi + 3];
  389.                     if (collisionMark == 123.0 || collisionMark == 246.0) {
  390.                         if (collisionMark == 123.0) {
  391.                             planet.material = this.materialCol;
  392.                         }
  393.  
  394.                         const scale = this.ssboData[bi + 7];
  395.                         if (scale > 0.0) {
  396.                             if (planet.scaling == null) {
  397.                                 planet.scaling = new BABYLON.Vector3(scale, scale, scale);
  398.                             } else {
  399.                                 planet.scaling.scaleInPlace(scale);
  400.                             }
  401.                         }
  402.                     }
  403.                 }
  404.  
  405.                 if (enabledCount < 10) {
  406.                     debug = true;
  407.                 }
  408.             }
  409.  
  410.             createAxisLine(scene, line, i, color, first) {
  411.                 if (i == 0) {
  412.                     if (!first) {
  413.                         return;
  414.                     }
  415.  
  416.                     var _mesh = BABYLON.Mesh.CreateLines("", line, scene, true);
  417.                 }
  418.                 else {
  419.                     var _mesh = BABYLON.Mesh.CreateDashedLines("", line, 0.7, 0.0, 0.0, scene, true);
  420.                 }
  421.  
  422.                 _mesh.material.checkReadyOnlyOnce = true;
  423.                 _mesh.color = color;
  424.             }
  425.  
  426.             createAxis(scene, scale, pstep) {
  427.                 var step = pstep || 1;
  428.  
  429.                 // xy
  430.                 for (var i = -scale; i <= scale; i += step) {
  431.                     var _xline = [new BABYLON.Vector3(-scale, i, 0), new BABYLON.Vector3(scale, i, 0)];
  432.                     this.createAxisLine(scene, _xline, i, new BABYLON.Color3(1, 0, 0), true);
  433.  
  434.                     var _yline = [new BABYLON.Vector3(i, -scale, 0), new BABYLON.Vector3(i, scale, 0)];
  435.                     this.createAxisLine(scene, _yline, i, new BABYLON.Color3(1, 0, 0), false);
  436.                 }
  437.  
  438.                 // xz
  439.                 for (var i = -scale; i <= scale; i += step) {
  440.                     var _xline = [new BABYLON.Vector3(-scale, 0, i), new BABYLON.Vector3(scale, 0, i)];
  441.                     this.createAxisLine(scene, _xline, i, new BABYLON.Color3(0, 1, 0), false);
  442.  
  443.                     var _zline = [new BABYLON.Vector3(i, 0, -scale), new BABYLON.Vector3(i, 0, scale)];
  444.                     this.createAxisLine(scene, _zline, i, new BABYLON.Color3(0, 1, 0), true);
  445.                 }
  446.  
  447.                 // yz
  448.                 for (var i = -scale; i <= scale; i += step) {
  449.                     var _yline = [new BABYLON.Vector3(0, -scale, i), new BABYLON.Vector3(0, scale, i)];
  450.                     this.createAxisLine(scene, _yline, i, new BABYLON.Color3(0, 0, 1), true);
  451.  
  452.                     var _zline = [new BABYLON.Vector3(0, i, -scale), new BABYLON.Vector3(0, i, scale)];
  453.                     this.createAxisLine(scene, _zline, i, new BABYLON.Color3(0, 0, 1), false);
  454.                 }
  455.             }
  456.  
  457.             createPlanet(scene, material, params) {
  458.                 if (!params) {
  459.                     return;
  460.                 }
  461.  
  462.                 var planet = BABYLON.Mesh.CreateSphere(params.name, 2, (params.size / worldToMetres) * params.zoom * worldScale, scene);
  463.                 planet.material = material;
  464.  
  465.                 /*
  466.                 planet.position.x = params.perihelion || 0 / worldToMetres;
  467.                 planet.position.y = params.aphelion || 0 / worldToMetres;
  468.                 planet.position.z = 0;
  469.                 */
  470.                 planet.position.x = params.perihelion || 0 / worldToMetres;
  471.                 planet.position.y = params.Z || 0 / worldToMetres;
  472.                 planet.position.z = params.aphelion || 0 / worldToMetres;
  473.  
  474.                 planet.forceDots = [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 0)];
  475.                 planet.forceLine = BABYLON.Mesh.CreateLines("", planet.forceDots, scene, true);
  476.                 planet.forceLine.color = new BABYLON.Color3(1, 1, 1);
  477.  
  478.                 // velocity line
  479.                 planet.velocityDots = [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 0)];
  480.                 planet.velocityLine = BABYLON.Mesh.CreateLines("", planet.velocityDots, scene, true);
  481.                 planet.velocityLine.color = new BABYLON.Color3(0, 1, 1);
  482.  
  483.                 // track
  484.                 planet.trackDots = [];
  485.                 planet.trackLine = null;
  486.  
  487.                 this.planets.push(planet);
  488.             }
  489.  
  490.             debugOutput(planet, scene) {
  491.                 var physPos = planet.position
  492.                 var forceVector = planet.forceVector;
  493.                 if (!forceVector) {
  494.                     return;
  495.                 }
  496.  
  497.                 // draw velocity
  498.                 var newPosition = new BABYLON.Vector3(physPos.x, physPos.y, physPos.z);
  499.  
  500.                 // draw force
  501.                 var forceDots = planet.forceDots;
  502.                 var forceLine = planet.forceLine;
  503.                 forceDots[0].copyFrom(newPosition);
  504.                 forceDots[1].copyFrom(forceVector.scale(forceZoom).add(newPosition));
  505.  
  506.                 if (!planet.isEnabled()) {
  507.                     forceDots[0].x = 0;
  508.                     forceDots[0].y = 0;
  509.                     forceDots[0].z = 0;
  510.                     forceDots[1].x = 0;
  511.                     forceDots[1].y = 0;
  512.                     forceDots[1].z = 0;
  513.                 }
  514.  
  515.                 BABYLON.Mesh.CreateLines("forceVector", forceDots, null, false, forceLine);
  516.  
  517.                 if (!planet.isEnabled()) {
  518.                     planet.forceLine.setEnabled(false);
  519.                 }
  520.  
  521.                 var velocityDots = planet.velocityDots;
  522.                 var velocityLine = planet.velocityLine;
  523.                 velocityDots[0].copyFrom(newPosition);
  524.                 velocityDots[1].copyFrom(planet.linearVelocity.scale(velocityZoom).add(newPosition));
  525.  
  526.                 if (!planet.isEnabled()) {
  527.                     velocityDots[0].x = 0;
  528.                     velocityDots[0].y = 0;
  529.                     velocityDots[0].z = 0;
  530.                     velocityDots[1].x = 0;
  531.                     velocityDots[1].y = 0;
  532.                     velocityDots[1].z = 0;
  533.                 }
  534.  
  535.                 BABYLON.Mesh.CreateLines("velocityVector", velocityDots, null, false, velocityLine);
  536.  
  537.                 if (!planet.isEnabled()) {
  538.                     planet.velocityLine.setEnabled(false);
  539.                 }
  540.  
  541.                 // track
  542.                 var trackDots = planet.trackDots;
  543.                 var trackLine = planet.trackLine;
  544.                 if (trackLine != null) {
  545.                     trackLine.dispose();
  546.                 }
  547.  
  548.                 if (trackDots.length == 0 || trackDots[trackDots.length - 1].subtract(newPosition).length() > 5) {
  549.                     trackDots.push(newPosition);
  550.                 }
  551.  
  552.                 if (trackDots.length > 1) {
  553.                     trackLine = BABYLON.Mesh.CreateLines("track", trackDots, scene, false);
  554.                     trackLine.color = this.trackColor;
  555.                 }
  556.             }
  557.  
  558.             createScene() {
  559.  
  560.                 // This creates a basic Babylon Scene object (non-mesh)
  561.                 var scene = new BABYLON.Scene(this.engine);
  562.                 //scene.enablePhysics(new BABYLON.Vector3(0, 0/*-9.8*/, 0));
  563.  
  564.                 var distanceValueCtrl = document.getElementById("distanceValue");
  565.  
  566.                 // This creates and positions a free camera (non-mesh)
  567.                 var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, scope, BABYLON.Vector3.Zero(), scene);
  568.                 camera.setPosition(new BABYLON.Vector3(0, scope * 2, scope * 2));
  569.  
  570.                 // This attaches the camera to the canvas
  571.                 camera.attachControl(this.canvas, true);
  572.  
  573.                 // important material
  574.                 //var material = new BABYLON.StandardMaterial("texture1", scene);
  575.                 var material = new BABYLON.ShaderMaterial("colorShader", scene, "color",
  576.                     {
  577.                         attributes: [BABYLON.VertexBuffer.PositionKind],
  578.                         uniforms: ["world", "viewProjection", "color"]
  579.                     });
  580.                 material.setColor4("color", new BABYLON.Color3(0.5, 0.6, 0.7).toColor4());
  581.                 ////materialPlane.wireframe = true;    
  582.                 material.backFaceCulling = false;//Always show the front and the back of an element          
  583.                 material.wireframe = true;//debug;
  584.  
  585.                 var materialCol = new BABYLON.ShaderMaterial("colorShader", scene, "color",
  586.                     {
  587.                         attributes: [BABYLON.VertexBuffer.PositionKind],
  588.                         uniforms: ["world", "viewProjection", "color"]
  589.                     });
  590.                 materialCol.setColor4("color", new BABYLON.Color3(0.9, 0.1, 0.1).toColor4());
  591.                 ////materialPlane.wireframe = true;    
  592.                 materialCol.backFaceCulling = false;//Always show the front and the back of an element          
  593.                 materialCol.wireframe = true;//debug;
  594.                 this.materialCol = materialCol;
  595.  
  596.                 this.trackColor = new BABYLON.Color3(0.5, 0.5, 1);
  597.  
  598.                 this.createAxis(scene, scope, scope / 10.0);
  599.  
  600.                 //this.createPlanet(scene, material, sun);
  601.                 //this.createPlanet(scene, material, earth);
  602.  
  603.                 for (var i = 0; i < this.numInstances; i++) {
  604.                     this.createPlanet(scene, material, this.planetInitialObjects[i]);
  605.                 }
  606.  
  607.                 return scene;
  608.             }
  609.  
  610.             async run() {
  611.  
  612.                 await this.init();
  613.                 await this.initCompute();
  614.  
  615.                 var scene = this.createScene()
  616.  
  617.                 this.engine.runRenderLoop(() => {
  618.                     if (debug) {
  619.                         for (var index = 0; index < this.planets.length; index++) {
  620.                             var planet = this.planets[index];
  621.  
  622.                             if (!planet.isEnabled()) {
  623.                                 planet.forceLine.setEnabled(false);
  624.                                 planet.velocityLine.setEnabled(false);
  625.                                 continue;
  626.                             }
  627.  
  628.                             this.debugOutput(planet);
  629.                         }
  630.                     }
  631.  
  632.                     if (scene && scene.activeCamera) {
  633.                         scene.render();
  634.                     }
  635.                 });
  636.  
  637.                 // Resize
  638.                 window.addEventListener("resize", () => {
  639.                     this.engine.resize();
  640.                 });
  641.             }
  642.         };
  643.  
  644.         (async () => await new Runner().run())();
  645.     </script>
  646. </body>
  647.  
  648. </html>
RAW Paste Data