質問編集履歴

2

文章を分かりやすく

2018/03/13 04:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,9 @@
46
46
 
47
47
  球体自体は生成されますが、キャンバスの中身は描画されていません。
48
48
 
49
+ また、キャンバスも特に変化がありません。
50
+
49
- また、キャンバスも特に変化なく(マッピングできた場合どうなるのかわかりませんが)あります。
51
+ (マッピングできた場合どうなるのかわかりませんが)
50
52
 
51
53
 
52
54
 

1

情報の追加

2018/03/13 04:16

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -61,3 +61,65 @@
61
61
  調べてみても、上記の方法しか紹介されておらず、どうしたものかと悩んでいます。
62
62
 
63
63
  アドバイスをいただければ幸いです。
64
+
65
+
66
+
67
+ ### Canvasの内容 ※追記
68
+
69
+ キャンバスには、世界規模の風速データを非同期で描画する処理を行っています。
70
+
71
+ http://www.techscore.com/blog/2015/12/13/wind_visualization/
72
+
73
+ ↑データとコードはこちらを参考にしています。
74
+
75
+
76
+
77
+ キャンバスは、X:1024, Y:512のサイズで2D描画しています。
78
+
79
+
80
+
81
+ ```
82
+
83
+ var canvas = d3.select("body").append("canvas")
84
+
85
+ .attr("id", "canvas")
86
+
87
+ .attr("width", 1024)
88
+
89
+ .attr("height", 512);
90
+
91
+
92
+
93
+ var xhr = new XMLHttpRequest();
94
+
95
+ xhr.open('GET', './wind.ieee', true);
96
+
97
+ // responseType="arraybuffer":サーバに期待するレスポンスタイプを変更できる。
98
+
99
+ xhr.responseType = 'arraybuffer';
100
+
101
+ xhr.onload = function(e) {
102
+
103
+ var buffer = this.response;
104
+
105
+ var wind = new Float32Array(buffer.byteLength / 4);
106
+
107
+ var dataview = new DataView(buffer);
108
+
109
+ for (var i = 0; i < wind.length; i++) {
110
+
111
+ wind[i] = dataview.getFloat32(i * 4);
112
+
113
+ }
114
+
115
+ App.run(canvas, wind);
116
+
117
+ }
118
+
119
+ xhr.send();
120
+
121
+ ```
122
+
123
+
124
+
125
+ 稚拙な文章で申し訳ないのですが、アドバイスや解決へのアプローチ方法などいただければ幸いです。