raymanng / 3d-wind-field Goto Github PK
View Code? Open in Web Editor NEWVisualize wind field on Cesium
Home Page: https://raymanng.github.io/3D-Wind-Field/demo/
License: MIT License
Visualize wind field on Cesium
Home Page: https://raymanng.github.io/3D-Wind-Field/demo/
License: MIT License
Hello. I recently learned about cesium, I found your blog post, it feels great, I plan to learn, but I found that github Dome is reporting an error. Locally I use node.js to be the same error. Because I am Novice, I am also trying to read the information, but I can't solve this problem. I hope the author can see that this problem can be fixed, thank you.
message:"When options.pixelFormat is DEPTH_COMPONENT or DEPTH_STENCIL, this WebGL implementation must support WEBGL_depth_texture. Check context.depthTexture."
I have a question about the wind ,that if i modify the shader,can i draw the profile wind?
this project is draw a horizontal wind,and can select the height,if i chang the code to draw a profile wind in a lon or lat ,would it can make it in Cesium.
last question ,my eventual aim is to draw a cloud in cesium which can fly dynamic due to the data of nc of wind which is wrf output data,Is it possiblely in theory?
the question which control the range of wind is solved by modify the shader in your code by myself.
my english is poor ,please tell me the answer. thank you very much.
Does particleHeight mean how many meters above the terrain?
If not, is there any variable to set the height of the particles on the terrain?
I have two different wind file, and i want to found how i can display one , and show the other in the same time .
i saw the post #13, but it didn't help me because, sometimes I have to show 2,3,4 files .nc and sometimes i have to hide 3 of them .
I may be found a way , it consist in set a name for each primitives
ex: particleSystem.particlesRendering.primitives.trails
--> particleSystem.particlesRendering.primitives.trails.name = FilesPath
But i can't get all primitive by name after :/ humm
Dear author ,When I magnified the map, I found that the wind field had obvious boundaries,I put in the latest data, and the wind show is smoother.but I still have a few questions.
1.As the map zooming in, the number of particles increases, can it be kept constant?
2.particles's pixel width is not a fixed pixel,when the map zooming in, the width will slowly increase.
Hello, this is a good example. Have you modified the source code of Cesium? Because I use the Cesium official package to report an error. Is there a way to implement the wind map with the official package?
我已经使用toolsUI-4.6.15.jar将grib2数据转换成了netCDF,但是这个数据跟作者提供的数据差别挺大的,如何做进一步处理呢,我知道Util文件中种有四个文件,包括processNetCDF.ps1文件,但是如何使用呢
Can you tell me,how to product demo.nc data file please?
I found some history:
Wed Apr 17 10:29:08 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncap2.exe -3 -S getMinMax.nco C:\Users\Rayman\Downloads\tempInvDim.nc C:\Users\Rayman\Downloads\uv.nc
Wed Apr 17 10:29:07 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncpdq.exe -a -lat C:\Users\Rayman\Downloads\tempFixDim.nc C:\Users\Rayman\Downloads\tempInvDim.nc
Wed Apr 17 10:29:07 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncks.exe --no_rec_dmn lev C:\Users\Rayman\Downloads\tempRecDim.nc C:\Users\Rayman\Downloads\tempFixDim.nc
Wed Apr 17 10:29:07 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncecat.exe -u lev C:\Users\Rayman\Downloads\tempLevDim.nc C:\Users\Rayman\Downloads\tempRecDim.nc
Wed Apr 17 10:29:07 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncap2.exe -S defineLev.nco C:\Users\Rayman\Downloads\tempUV.nc C:\Users\Rayman\Downloads\tempLevDim.nc
Wed Apr 17 10:29:07 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncrename.exe -v u-component_of_wind_planetary_boundary,U -v v-component_of_wind_planetary_boundary,V C:\Users\Rayman\Downloads\tempWind.nc C:\Users\Rayman\Downloads\tempUV.nc
Wed Apr 17 10:29:06 2019: D:\GreenSoft\Science\Data_Processing_Analysis_Visualization\NetCDF_Operators\ncks.exe -v u-component_of_wind_planetary_boundary,v-component_of_wind_planetary_boundary C:\Users\Rayman\Downloads\20180916.nc C:\Users\Rayman\Downloads\tempWind.nc
Read using CDM IOSP GribCollection v3
but I dont have some data,like tempInvDim.nc,uv.nc ...
Can you upload these files?THANKS!
您好,作者。
1.请问这个项目能否实现多天的风场可视化么?
2.多天风场可视化的效果可以是连续的?
希望您能解答一下!
谢谢
Hello, I rendered the wind field in Leaflet with the data provided in your demo and found that the rendered result is completely different from that here, I wonder why
you can just hide or show primitives which you added,like that:
for (const item of this.scene.primitives._primitives) {
if (item.commandType === 'Compute' || item.commandType === 'Draw') {
item.show = true
}
}
hello, in the project,if i activate the MOUSE_MOVE handler,like this:
var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handler.setInputAction(function (movement) { var pick =this.viewer.scene.pick(movement.endPosition); },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
when the mousemove quickly,the particles will have bug.
Hi,dear author, I have a netcdf4 file, how can I convert it to a netcdf3 file?
Hello, Thank you for helping me out all the time, I'm asking questions again. I tried to download data from your website (GFS), I downloaded 0.5 precision data, the file named "gfsanl_3_20191112_0000_grb2". After the download, I used the ToolsUI.jar which converted to NetCDF format, but there is a problem, I found that the converted .nc file , variables are 147, and you provide wind data in only 8 variables. If I only want wind field data, how can I filter out useless data from my .nc data ? Are you using any Tools, or does tools.jar come with its own filter?
In this function, why the repeatVertex is 4 not 1 ? why the normal is set 4 times on one point ?
`
createSegmentsGeometry(userInput) {
const repeatVertex = 4;
var st = [];
for (var s = 0; s < userInput.particlesTextureSize; s++) {
for (var t = 0; t < userInput.particlesTextureSize; t++) {
for (var i = 0; i < repeatVertex; i++) {
st.push(s / userInput.particlesTextureSize);
st.push(t / userInput.particlesTextureSize);
}
}
}
st = new Float32Array(st);
var normal = [];
const pointToUse = [-1, 1];
const offsetSign = [-1, 1];
for (var i = 0; i < userInput.maxParticles; i++) {
for (var j = 0; j < repeatVertex / 2; j++) {
for (var k = 0; k < repeatVertex / 2; k++) {
normal.push(pointToUse[j]);
normal.push(offsetSign[k]);
normal.push(0);
}
}
}
normal = new Float32Array(normal);
const indexSize = 6 * userInput.maxParticles;
var vertexIndexes = new Uint32Array(indexSize);
for (var i = 0, j = 0, vertex = 0; i < userInput.maxParticles; i++) {
vertexIndexes[j++] = vertex + 0;
vertexIndexes[j++] = vertex + 1;
vertexIndexes[j++] = vertex + 2;
vertexIndexes[j++] = vertex + 2;
vertexIndexes[j++] = vertex + 1;
vertexIndexes[j++] = vertex + 3;
vertex += 4;
}
var geometry = new Cesium.Geometry({
attributes: new Cesium.GeometryAttributes({
st: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 2,
values: st
}),
normal: new Cesium.GeometryAttribute({
componentDatatype: Cesium.ComponentDatatype.FLOAT,
componentsPerAttribute: 3,
values: normal
}),
}),
indices: vertexIndexes
});
return geometry;
}
`
If I want to pick up the wind field data at a certain point on the earth, what method should I use? I use the following API, and the result returns undefined.
var pick = viewer.scene.pick(movement.position);
dear author,I have a question.
In this demo, loading data for one day, so how can I achieve the visualization of data for multiple days?
If the uv vector value is ignore value, I want don't display it.
I think it's getWind.frag where we look up the u, v vector values, right?
sorry bad english..
my dataset
DataSet.txt
exclude area rectangle
就是在官方例子中的右上角的3D、2D、columbus view切换功能。项目可以实现吗?如果不支持,怎么样调整可以支持呢?希望可以给个方向指导,谢谢。
Hello and thank you for this project, I've been trying to intergrate your code into my project which can also represent naval data like wave or current. For now I set the lineWidth
parameter wider and make it change based on frame number, so it would expand along the way until it disappears, but I also want it to show like a circular shape, like in https://www.ventusky.com/?p=-56.02;54.71;6&l=wave&w=0SJdjA9AA ,instead of a straight line. How exactly can I do that? I'm fairly new to GLSL programming, I think I should make the edge move slower than the center, but how can I do that?
Hello
Particules have soe issue to be displayed in the zone of longitude 0
here a screen capture on a longitude band with no wind particules
I have a netcdf Files , contain data in one geopgraphic zone , but the particules display in all the earth , how to centralize ?
(don't pay attention about my english , because i'm not good)
select layerToShow noEffect
demo cant show wind
Thank you for this great project.
And I want to know the wind field can be displayed clamp to ground? like the following picture.
Hi, dear author, another question.
I fount that the wind speed in your project is normalized by min&max of uv in one data.
And when I have two different data that min&max of uv is different far away. like one's uv is smaller total, the another's uv is bigger total. then I can't tell which position has a bigger wind in your project when I compare them at the same time.
If I want have the same meaning of wind speed in project by many different data, what should I do?
dear author,i have a question.
What does the color of the particles represent
speed? direction? or?
Dear author, I encountered some problems while running the {demo](https://raymanng.github.io/3D-Wind-Field/demo/).
What tools do you usually use to debug shader code?I'm having trouble with this. Could you give me some advice?thank you very much!
I noticed in your post on the Cesium blog that you mentioned trying the Entity API before shifting to the WebGL/custom primitive approach. I'm curious if you would be willing to share the Entity API approach that you tried?
Additionally, apart from performance with high numbers of particles, did you encounter any other issues with the Entity API Approach?
Thanks in advance!
Hello, dear author. This demo is amazing! Thank you for sharing.
Describe your problem
I want to limit the display of wind fields to a small area of the earth,but it doesn't work.
Steps to reproduce
What did you do before your problem occurred?
1.Overriding the DataProcess.loadData() method, return my data.
2.The data format returned by me is consistent with the data format returned by the demo original implementation.
What is your expected behavior
Where there is data on earth, there is wind field.
[Optional]What NetCDF data are you using (Please answer this if you are using your own data)
I use the json data format.
What help i expect
1,What should I do to achieve the effect I want?
2,I hava little experience in Cesium and glsl,If I want to have the ability to modify and extend the demo as soon as possible, what should I learn? Cesium or Opengl?
Thanks any way!
I know that a color interval can be defined in the colorTable file, but what is the specific color corresponding to what value is judged?
Hi Rayman,
I'm trying to decide wich tool I'll use to show wind particles in my Cesium. I have found this and yours.
Your tool is fast and pretty, but uses NC file. The other one uses JSON data extracted using GRIB2JSON and is what I need becaus my METOC GOV entity gives me this format (http://s0.cptec.inpe.br/oceano/blend/vsm/vsm_diario_ams/vsm.json) but it is very slow and ugly.
Can you point to me where in the code I can modify to use JSON data in this format (like the other tool? As you can see it is very simple and easy to understand.
I have some skills in JS but I found your code too big and with many classes. If you lead me in right direction I think I can do this job.
Thanks for your help.
By the way... can you make it more stand alone like the other one? I see you make all Cesium instances stuff inside your code. Leave this work to the user.
尊敬的作者,您好!
请问现在项目能够实现三维转换成二维么?
我现在有转换成二维平面的需求!
我看到之前有人问这个问题,请问成功了么?
或者您能提供一些实现的方向么?
I ported the code to react, and the version of cesium used was 1.60, and I found that the particles would stop after running for a period of time. What might be the reason for this?
Dear Rayman.
I have a question about the 3D-Wind-Field material that I uploaded to GitHub.
I'll ask 3 questions.
#1. How do you generate the demo.nc file?
The demo data is from NOAA Global Forecast System. The original data is in GRIB2 format and I used toolsUI to convert the GRIB2 file to a NetCDF V3 file.
Is there a manual for creating NetCDF V3 files through ToolsUI here?
#2. Is there any coding to change the color?
#3. An error appears when the attached .nc file is uploaded.
Is there a workaround?
"utils.js:11 Uncaught TypeError: Not a valid NetCDF v3.x file: should start with CDF"
I need your help.
Hello,dear author.
Recently I am studying your algorithm in demo, but due to the limited level, I can't understand some algorithm .
Could you please tell me which algorithms are used in this demo?
I want to study this demo further.
Thanks any way!
I want to drag the panel control , because i have 2 (or more) file netcdf .
(1)In the data you provided, the lev of the dimensions variable is 1, now I have a data, lev is 30, but when I run it, it throws an error: the height should be less than or equal to the maximum texture size (8192). I tried to change the maximum texture size and unfortunately failed. So how do I modify the program? Should I change the shader code ?
(2)about the dimension variable, the lon,lat,lev. what does lev means? it means height or else ?
I need your help and look forward to your answer! thanks very much!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.