Coder Social home page Coder Social logo

raymanng / 3d-wind-field Goto Github PK

View Code? Open in Web Editor NEW
386.0 15.0 141.0 5.79 MB

Visualize wind field on Cesium

Home Page: https://raymanng.github.io/3D-Wind-Field/demo/

License: MIT License

JavaScript 71.11% HTML 1.69% GLSL 24.01% PowerShell 3.19%
visualization cesium

3d-wind-field's People

Contributors

maxdow avatar raymanng avatar zouyaoji avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

3d-wind-field's Issues

There is an error, the project can't run.

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."
image

Guide help

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.

Questions about the direction of particle flow

Can you please help answer my questions about the direction of particle flow, as follows, thank you very much!

  1. I noticed that the particle flow started in this direction. Is this correct?

擷取

  1. Why does the particle flow turn almost 90 degrees? Shouldn't it be smooth?

擷取1

How to hide and show different wind?

I have two different wind file, and i want to found how i can display one , and show the other in the same time .

wind_visual_forum2

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

There may be something wrong with the NC data in demo

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.

crashed when using Cesium official package

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?

netCDF数据如何进一步处理呢

我已经使用toolsUI-4.6.15.jar将grib2数据转换成了netCDF,但是这个数据跟作者提供的数据差别挺大的,如何做进一步处理呢,我知道Util文件中种有四个文件,包括processNetCDF.ps1文件,但是如何使用呢

how to produce demo.nc?

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.多天风场可视化的效果可以是连续的?
希望您能解答一下!
谢谢

I have a question about the ScreenSpaceEventHandler

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.
image

NetCDF data convert

Hi,dear author, I have a netcdf4 file, how can I convert it to a netcdf3 file?

About downloading wind data from GFS, how can i filter useless data?

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?

NetCDF data

Hi,dear.
My data and effects are as follows.
Is the cause of this problem with my data?
1601343086(1)
1601348443(1)

why the repeatVertex is 4 in function 'createSegmentsGeometry' ?

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;
}

`

about picking up the wind field data

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);

question of data

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?

Question about making effect representing wave

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?

Wind speed meaning in different data

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.
image
image
If I want have the same meaning of wind speed in project by many different data, what should I do?

Entity API Approach

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!

A small country scale wind farm

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]Screenshots
image

[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!

Where is the color controlled?

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?

What about using JSON data?

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.

三维转换成二维

尊敬的作者,您好!
请问现在项目能够实现三维转换成二维么?
我现在有转换成二维平面的需求!
我看到之前有人问这个问题,请问成功了么?
或者您能提供一些实现的方向么?

3D-Wind-Field Question!!

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.

When I zoom in on a wind circle, I don't feel right.

I chose a tornado with a higher wind speed that didn't seem to be the result I wanted. It's okay to have a smaller wind speed.
Like this place:
图片
The result is like this:
图片

It should actually be like this.
图片

I don't know what to do to achieve the desired effect.

About learning algorithm

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!

Sry for my question ! :( but i need help

I would like to make sure that the wind does not continue outside the geographical limits

Do you have any idea ?

sry to make a long discution about that but , i need :/
wind_visual

About NetCDF data

(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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.