{ "X3D": { "encoding":"UTF-8", "@profile":"Immersive", "@version":"3.2", "@xsd:noNamespaceSchemaLocation":"https://www.web3d.org/specifications/x3d-3.2.xsd", "JSON schema":"https://www.web3d.org/specifications/x3d-4.0-JSONSchema.autogenerated.json", "head": { "meta": [ { "@name":"title", "@content":"CloudsProcedural3.x3d" }, { "@name":"description", "@content":"X3D utilizing ecmascript to develop quasi volumetric 3D clouds from png image textured billboard nodes." }, { "@name":"creator", "@content":"Capt Darren W. Murphy" }, { "@name":"created", "@content":"1 November 2007" }, { "@name":"modified", "@content":"20 October 2019" }, { "@name":"identifier", "@content":"https://www.web3d.org/x3d/content/examples/Savage/Environment/Atmosphere/CloudsProcedural3.x3d" }, { "@name":"generator", "@content":"X3D-Edit, https://www.web3d.org/x3d/content/README.X3D-Edit.html" }, { "@name":"license", "@content":"../../license.html" }, { "@name":"TODO", "@content":"fix links" }, { "@name":"translated", "@content":"21 April 2026" }, { "@name":"generator", "@content":"X3dToJson.xslt, https://www.web3d.org/x3d/stylesheets/X3dToJson.html" }, { "@name":"reference", "@content":"X3D JSON encoding: https://www.web3d.org/wiki/index.php/X3D_JSON_Encoding" } ] }, "Scene": { "-children":[ { "#comment":"A png image file for the cloud texture must be designated in the ecmascript node." }, { "WorldInfo": { "@title":"CloudsProcedural3.x3d" } }, { "Viewpoint": { "@description":"Main", "@jump":false, "@orientation":[0,1,0,1.57], "@position":[50000,1000,42000] } }, { "Viewpoint": { "@description":"Light House Tower", "@jump":false, "@orientation":[0,1,0,1.3], "@position":[45000,1290,44000] } }, { "Viewpoint": { "@description":"centerWest", "@jump":false, "@orientation":[0,1,0,2.5], "@position":[48000,1000,20000] } }, { "Background": { "@groundColor":[0,0,1], "@skyColor":[0,0,1] } }, { "DirectionalLight": { "@ambientIntensity":1, "@direction":[-1,0,0], "@global":true } }, { "PointLight": { "@location":[25000,100,25000], "@radius":1000000 } }, { "Group": { "@DEF":"Terrain", "-children":[ { "Transform": { "@scale":[50,50,50], "@translation":[25000,0,25000], "-children":[ { "Inline": { "@url":["../../Locations/MontereyBayCalifornia/MontereyBayLargeMesh.x3d","https://www.web3d.org/x3d/content/examples/Savage/Locations/MontereyBayCalifornia/MontereyBayLargeMesh.x3d","../../Locations/MontereyBayCalifornia/MontereyBayLargeMesh.wrl","https://www.web3d.org/x3d/content/examples/Savage/Locations/MontereyBayCalifornia/MontereyBayLargeMesh.wrl"] } } ] } }, { "Transform": { "@rotation":[1,0,0,1.57], "@translation":[25000,0,25000], "-children":[ { "Collision": { "@bboxSize":[100000,100000,100000], "-children":[ { "Shape": { "-geometry": { "Rectangle2D": { "@size":[77000,55000] } }, "-appearance": { "Appearance": { "-texture": { "ImageTexture": { "@url":["ocean.png","https://www.web3d.org/x3d/content/examples/Savage/Environment/Atmosphere/ocean.png"] } } } } } } ] } } ] } } ] } }, { "Group": { "@DEF":"Placemarks", "-children":[ { "Transform": { "@scale":[50,50,50], "@translation":[45000,30,44000], "-children":[ { "Inline": { "@url":["Lighthouse.x3d","https://www.web3d.org/x3d/content/examples/Savage/Environment/Atmosphere/Lighthouse.x3d","Lighthouse.wrl","https://www.web3d.org/x3d/content/examples/Savage/Environment/Atmosphere/Lighthouse.wrl"] } } ] } } ] } }, { "Group": { "@DEF":"Clouds", "-children":[ { "Transform": { "@DEF":"Cumulus" } }, { "Transform": { "@DEF":"Cirrus" } }, { "Script": { "@DEF":"PixelScript", "@directOutput":true, "field": [ { "@name":"Cumulus", "@accessType":"initializeOnly", "@type":"SFNode", "-children":[ { "Transform": { "@USE":"Cumulus" } } ] }, { "@name":"Cirrus", "@accessType":"initializeOnly", "@type":"SFNode", "-children":[ { "Transform": { "@USE":"Cirrus" } } ] } ], "#sourceCode":[ "", "", "ecmascript:", "", "", "function cumulustranslation() // These values designate the boundary location of the cloud", "{", "\tX = 50000*Math.random(); // X horizontal range", "\tY = 1000 + 300*Math.random();\t // Y vertical base + range", "\tZ = 50000*Math.random(); // z horizontal range", "", "\trandomt = new String(X+' '+Y+' '+Z);", "", "\treturn randomt;", "\t", "}", "", "", "", "function cumulusscale() // these values scale a cloud within a designated size", "{", "", "\tmaxscale = 1;", "", "\tscale = Math.round(9+maxscale*Math.random());", "\tX = 1.5*scale;", "\tY = scale;", "\tZ = scale;", "", "\trandomscale = new String(X+' '+Y+' '+Z);", "", "\treturn randomscale;", "\t", "}", "", "", "function cirrustranslation() // These values designate the boundary location of the cloud", "{", "\tX = 50000*Math.random(); // X horizontal range", "\tY = 8000 + 1000*Math.random();\t // Y vertical base + range", "\tZ = 50000*Math.random(); // z horizontal range", "", "\trandomt = new String(X+' '+Y+' '+Z);", "", "\treturn randomt;", "\t", "}", "", "", "", "function cirrusscale() // these values scale a cloud within a designated size", "{", "", "\tmaxscale = 1;", "", "\tscale = Math.round(9+maxscale*Math.random());", "\tX = 1.5*scale;", "\tY = 2*Math.random();", "\tZ = 1.5*scale;", "", "\trandomscale = new String(X+' '+Y+' '+Z);", "", "\treturn randomscale;", "\t", "}", "", "", "function cumulussectiontranslation() // These random values place another portion of cumulus type cloud", "{", "", "\trandomtheta = 6.28319*Math.random();", "\trandomphi = .7854*Math.random();", "\trandomradius = 90 + 5*Math.random();//the first whole number should be close to the sectionradius", "", "\tX = randomradius*Math.cos(randomtheta)*Math.sin(randomphi);", "\tZ = randomradius*Math.sin(randomtheta)*Math.sin(randomphi);", "\tY = randomradius*Math.cos(randomphi);", "\t", "", "\trandomt = new String(X+' '+Y+' '+Z);", "", "\treturn randomt;", "\t", "}", "", "function cirrussectiontranslation() // These random values place another portion of cirrus type cloud", "{", "", "\trandomtheta = 6.28319*Math.random();", "\trandomphi = .7854*Math.random();", "\trandomradius = 90 + 5*Math.random();//the first whole number should be close to the sectionradius", "", "\tX = randomradius*Math.cos(randomtheta)*Math.sin(randomphi);", "\tZ = randomradius*Math.sin(randomtheta)*Math.sin(randomphi);", "\tY = randomradius*Math.cos(randomphi);", "\t", "", "\trandomt = new String(X+' '+Y+' '+Z);", "", "\treturn randomt;", "\t", "}", "", "", "function rotation() // This random value is for the billboard rotation not used in this script", "{", "", "", "\tradians = 6.28*Math.random();", "", "\trandomr = new String('0 0 1 ' + radians );", "\t", "\t", "\treturn randomr;", "\t", "}", "", "function cumulus()", "{", "", "maxi = 10; // number of clouds", "", "maxj = 5; // denotes how many portions affecting the size of the cloud", "", "maxk = 8; // number of billboards indicating cloud density", "", "sectionradius = 100; //radius of individual cloud sections", "", "", "", "", "", "for (var i=0; i < maxi; i++) ", "{", "", "", "", "CloudStringA = '\tTransform {\t\t\n' +", "' scale '+ cumulusscale() + ' \t\n' +", "' translation '+ cumulustranslation() + ' \n' + // cloud placement", "' children [\t \n';", "", "", "CloudStringB = new Array();", "CloudStringF = new Array();", "", " \tfor (var j=0; j < maxj; j++)", " \t{", "", "\tradius = 0;", "", "\tCloudStringB[j]= ' Transform {\t\t \t \n' +", "\t' translation '+ cumulussectiontranslation() + ' \n' + // section placement", "\t' children [\t \n';", "", "\t", "\tCloudStringC = new Array();", "\timage = new String();", "", " \t\tfor (var k=1; k < maxk; k++) // maxk value denotes how many textured billboards make up the cloud ", " \t\t{", "", "", "\t\trandomtheta = 6.28319*Math.random();", "\t\trandomphi = 1.57079*Math.random();", "\t\tradius = radius+(sectionradius/maxk); // radius incremental steps based on billow radius and max billboards", "", "\t\tX = radius*Math.cos(randomtheta)*Math.sin(randomphi);", "\t\tZ = radius*Math.sin(randomtheta)*Math.sin(randomphi);", "\t\tY = radius*Math.cos(randomphi);", "", "", "\t\tif (Y <= 30) //cloud shading and lighting control", " \t{\t", "\timage = ' \"Spheretexture.png\" \"https://www.web3d.org/x3d/content/examples/Savage/Environment/Spheretexture.png\" \n';", " \t}", "", " \t\telse", " \t{\t", "\timage = ' \"Spheretexture.png\" \"https://www.web3d.org/x3d/content/examples/Savage/Environment/Spheretexture.png\" \n';", " \t}", "", "\t", "\t\t", "\t\tBillboardtranslation = new String(X+' '+Y+' '+Z);", "", "\t\tCloudStringC[k] = '\tTransform {\t\t \n' +", "\t\t' translation '+ Billboardtranslation + ' \n' + // random billboard placement within radius designated above", "\t\t'\t children [\t \n' +", "\t\t'\t Billboard {\t \n' +", "\t\t'\t axisOfRotation 0 0 0\t \n' + // 0 0 0 designates rotation on all axis", "\t\t'\t children [\t \n' +", "\t\t'\t Transform {\t \t\t\n' +", "\t\t'\t rotation 0 0 0 0 \t\t \n' + // a rotation of the individual billboards can be defined", "\t\t'\t children [\t \n' +", "\t\t'\t Shape {\t \n' +", "\t\t'\t appearance Appearance {\t \n' +", "\t\t'\t\t\t\tmaterial Material {\t\t\n' +", "\t\t'\t\t\t\t } \t\t\n' +", "\t\t'\t texture ImageTexture {\t \n' +", "\t\t'\t url [ ' + image + ' ] \n' + ", "\t\t'\t }\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\tgeometry Sphere {\t\t\t\t\t\n' +", "\t\t'\t radius 50\t\t\t\t\t\n' +", "\t\t'\t }\t\t\t\t\t\t\n' +", "\t\t'\t }\t \n' +", "\t\t'\t ]\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t ]\t \n' +", "\t\t'\t }\t \n' +", "\t\t' ]\t \n' +", "\t\t' }\t \n'; ", "\t\t", "", "\t\t}", "", "\tCloudStringD = CloudStringC.join(' ');", "", "\t", "\tCloudStringE = ' ]\t \n' +", "\t'\t}\t \n';", "", "\tCloudStringF[j] = CloudStringB[j] + CloudStringD +CloudStringE;", "", "", "\t}", "", "CloudStringG = CloudStringF.join(' ');", "", "CloudStringH = ' ]\t \n' +", "' }\t \n' +", "'######################################################### \n';", "", "CloudString = CloudStringA + CloudStringG + CloudStringH;", "", "", "", "newNode = Browser.createVrmlFromString(CloudString);", "Cumulus.children[i] = newNode[0];", "", "", " }", "", "}", "", "function cirrus()", "", "{", "", "maxi = 2; // number of clouds", "", "maxj = 5; // denotes how many portions affecting the size of the cloud", "", "maxk = 8; // number of billboards indicating cloud density", "", "sectionradius = 1000; //radius of individual cloud sections", "", "", "", "", "", "for (var i=0; i < maxi; i++) ", "{", "", "", "", "CloudStringA = '\tTransform {\t\t \n' +", "' scale '+ cirrusscale() + ' \t \n' +", "' translation '+ cirrustranslation() + ' \n' + // cloud placement", "' children [\t \n';", "", "", "CloudStringB = new Array();", "CloudStringF = new Array();", "", " \tfor (var j=0; j < maxj; j++)", " \t{", "", "\tradius = 0;", "", "\tCloudStringB[j]= ' Transform {\t\t \t \n' +", "\t' translation '+ cirrussectiontranslation() + ' \n' + // section placement", "\t' children [\t \n';", "", "\t", "\tCloudStringC = new Array();", "", " \t\tfor (var k=1; k < maxk; k++) // maxk value denotes how many textured billboards make up the cloud ", " \t\t{", "", "", "\t\trandomtheta = 6.28319*Math.random();", "\t\trandomphi = 1.57079*Math.random();", "\t\tradius = radius+(sectionradius/maxk); // radius incremental steps based on section radius and max billboards", "", "\t\tX = radius*Math.cos(randomtheta)*Math.sin(randomphi);", "\t\tZ = radius*Math.sin(randomtheta)*Math.sin(randomphi);", "\t\tY = radius*Math.cos(randomphi);", "\t\t", "\t\tBillboardtranslation = new String(X+' '+Y+' '+Z);", "", "\t\tCloudStringC[k] = '\tTransform {\t\t \n' +", "\t\t' translation '+ Billboardtranslation + ' \n' + // random billboard placement within radius designated above", "\t\t'\t children [\t \n' +", "\t\t'\t Billboard {\t \n' +", "\t\t'\t axisOfRotation 0 0 0\t \n' + // 0 0 0 designates rotation on all axis", "\t\t'\t children [\t \n' +", "\t\t'\t Transform {\t \t\t\n' +", "\t\t'\t rotation ' + rotation() + '\t \n' +", "\t\t'\t children [\t \n' +", "\t\t'\t Shape {\t \n' +", "\t\t'\t appearance Appearance {\t \n' +", "\t\t'\t\t\t material Material {\t\t\t\n' +", "\t\t'\t\t\t }\t\t\t\t\t\n' +", " \t\t'\t texture ImageTexture {\t \n' +", "\t\t'\t url [\"cloudtexture3.png\" \"https://www.web3d.org/x3d/content/examples/Savage/Environment/cloudtexture1_4.png\" ] \n' +", "\t\t'\t }\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t geometry IndexedFaceSet {\t \n' + // define type of geometry to texture", "\t\t'\t coordIndex [ 0, 1, 2, 3 ]\t \n' +", "\t\t'\t\t\t solid FALSE\t\t \n' +", "\t\t'\t coord Coordinate {\t \n' +", "\t\t'\t point [ 500 500 0,\t \n' + // define size of the geometry. Here 100 meter 2D square.", "\t\t'\t 500 -500 0,\t \n' +", "\t\t'\t -500 -500 0,\t \n' +", "\t\t'\t -500 500 0 ]\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t ]\t \n' +", "\t\t'\t }\t \n' +", "\t\t'\t ]\t \n' +", "\t\t'\t }\t \n' +", "\t\t' ]\t \n' +", "\t\t' }\t \n'; ", "\t\t", "", "\t\t}", "", "\tCloudStringD = CloudStringC.join(' ');", "", "\tCloudStringE = ' ]\t \n' +", "\t'\t}\t \n';", "", "\tCloudStringF[j] = CloudStringB[j] + CloudStringD +CloudStringE;", "", "", "\t}", "", "CloudStringG = CloudStringF.join(' ');", "", "CloudStringH = ' ]\t \n' +", "' }\t \n' +", "'######################################################### \n';", "", "CloudString = CloudStringA + CloudStringG + CloudStringH;", "", "", "", "newNode = Browser.createVrmlFromString(CloudString);", "Cirrus.children[i] = newNode[0];", "", " }", "", "}", "", "", "function initialize()", "", "{", "", "cumulus();", "", "cirrus();", "}", "", "" ] } } ] } } ] } } }