1. 具体实例

通过WebGL，可以渲染生成DEM(数字高程模型)。DEM(数字高程模型)是网格点组成的模型，每个点都有x，y，z值；x，y根据一定的间距组成网格状，同时根据z值的高低来选定每个点的颜色RGB。通过这个例子可以熟悉WebGL颜色渲染的过程。

2. 解决方案

1) DEM数据.XYZ文件

这里使用的DEM文件的数据组织如下，如下图所示。

其中每一行表示一个点，前三个数值表示位置XYZ，后三个数值表示颜色RGB。

2) showDEM.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title> 显示地形 </title>
    <script src="lib/webgl-utils.js"></script>
    <script src="lib/webgl-debug.js"></script>
    <script src="lib/cuon-utils.js"></script>
    <script src="lib/cuon-matrix.js"></script>
    <script src="showDEM.js"></script>
</head>

<body>
    <div><input type = 'file' id = 'demFile' ></div>
    <!-- <div><textarea id="output" rows="300" cols="200"></textarea></div> -->
    <div>
        <canvas id ="demCanvas" width="600" height="600">
            请使用支持WebGL的浏览器
        </canvas>
    </div>
</body>

</html>

3) showDEM.js

// Vertex shader program
var VSHADER_SOURCE =
    //'precision highp float;\n' +
    'attribute vec4 a_Position;\n' +
    'attribute vec4 a_Color;\n' +
    'uniform mat4 u_MvpMatrix;\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    '  gl_Position = u_MvpMatrix * a_Position;\n' +
    '  v_Color = a_Color;\n' +
    '}\n';

// Fragment shader program
var FSHADER_SOURCE =
    '#ifdef GL_ES\n' +
    'precision mediump float;\n' +
    '#endif\n' +
    'varying vec4 v_Color;\n' +
    'void main() {\n' +
    '  gl_FragColor = v_Color;\n' +
    '}\n';

//
var col = 89;       //DEM宽
var row = 245;      //DEM高

// Current rotation angle ([x-axis, y-axis] degrees)
var currentAngle = [0.0, 0.0];

//当前lookAt()函数初始视点的高度
var eyeHight = 2000.0;

//setPerspective()远截面
var far = 3000;

//
window.onload = function () {
    var demFile = document.getElementById('demFile');
    if (!demFile) {
        console.log("Error!");
        return;
    }

    //demFile.onchange = openFile(event);
    demFile.addEventListener("change", function (event) {
        //判断浏览器是否支持FileReader接口
        if (typeof FileReader == 'undefined') {
            console.log("你的浏览器不支持FileReader接口！");
            return;
        }

        //
        var reader = new FileReader();
        reader.onload = function () {
            if (reader.result) {        
                //        
                var stringlines = reader.result.split("\n");
                verticesColors = new Float32Array(stringlines.length * 6);
            
                //
                var pn = 0;
                var ci = 0;
                for (var i = 0; i < stringlines.length; i++) {
                    if (!stringlines[i]) {
                        continue;
                    }
                    var subline = stringlines[i].split(',');
                    if (subline.length != 6) {
                        console.log("错误的文件格式！");
                        return;
                    }
                    for (var j = 0; j < subline.length; j++) {
                        verticesColors[ci] = parseFloat(subline[j]);
                        ci++;
                    }
                    pn++;
                }
            
                if (ci < 3) {
                    console.log("错误的文件格式！");
                }

                //
                var minX = verticesColors[0];
                var maxX = verticesColors[0];
                var minY = verticesColors[1];
                var maxY = verticesColors[1];
                var minZ = verticesColors[2];
                var maxZ = verticesColors[2];
                for (var i = 0; i < pn; i++) {
                    minX = Math.min(minX, verticesColors[i * 6]);
                    maxX = Math.max(maxX, verticesColors[i * 6]);
                    minY = Math.min(minY, verticesColors[i * 6 + 1]

首页上一页 1 2 3 4 5 下一页尾页 1/5/5
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：vue实现随机验证码功能	下一篇：网页下拉一屏后显示返回顶部按钮