cesium开发&从github上面下载源代码环境搭建

github上源代码安装。一开始我是想从github上面下载源代码来运行一下。首先使用webstorm打开下载后的源代码结构如下图所示。

在gulp.js代码中可以看到有如下的函数。glslToJavaScript,这里需要利用nodejs和gulp来编译CzmBuiltins.js文件

需要创建一个工程,将源代码中的glsl后缀的文件按照源代码中的路径配置过来。具体的工程如下图所示。

当然就是需要按照nodejs的相关模块了,这里可以由代码中可以看得出来。

var fs = require('fs');
var gulp = require('gulp');
var rimraf = require('rimraf');
var globby = require('globby');
var path = require('path');


gulp.task('test',function (done) {
    console.log( "gulp default task" );
})

gulp.task('build',function (done) {
    glslToJavaScript(false, 'Build/minifyShaders.state');
})

function glslToJavaScript(minify, minifyStateFilePath) {
    fs.writeFileSync(minifyStateFilePath, minify);
    var minifyStateFileLastModified = fs.existsSync(minifyStateFilePath) ? fs.statSync(minifyStateFilePath).mtime.getTime() : 0;


    var leftOverJsFiles = {};

    globby.sync(['Source/Shaders/**/*.js', 'Source/ThirdParty/Shaders/*.js']).forEach(function(file) {
        leftOverJsFiles[path.normalize(file)] = true;
    });

    var builtinFunctions = [];
    var builtinConstants = [];
    var builtinStructs = [];

    var glslFiles = globby.sync(['Source/Shaders/**/*.glsl', 'Source/ThirdParty/Shaders/*.glsl']);
    glslFiles.forEach(function(glslFile) {
        glslFile = path.normalize(glslFile);
        var baseName = path.basename(glslFile, '.glsl');
        var jsFile = path.join(path.dirname(glslFile), baseName) + '.js';

        // identify built in functions, structs, and constants
        var baseDir = path.join('Source', 'Shaders', 'Builtin');
        if (glslFile.indexOf(path.normalize(path.join(baseDir, 'Functions'))) === 0) {
            builtinFunctions.push(baseName);
        }
        else if (glslFile.indexOf(path.normalize(path.join(baseDir, 'Constants'))) === 0) {
            builtinConstants.push(baseName);
        }
        else if (glslFile.indexOf(path.normalize(path.join(baseDir, 'Structs'))) === 0) {
            builtinStructs.push(baseName);
        }

        delete leftOverJsFiles[jsFile];

        var jsFileExists = fs.existsSync(jsFile);
        var jsFileModified = jsFileExists ? fs.statSync(jsFile).mtime.getTime() : 0;
        var glslFileModified = fs.statSync(glslFile).mtime.getTime();

        if (jsFileExists && jsFileModified > glslFileModified && jsFileModified > minifyStateFileLastModified) {
            return;
        }

        var contents = fs.readFileSync(glslFile, 'utf8');
        contents = contents.replace(/\r\n/gm, '\n');

        var copyrightComments = '';
        var extractedCopyrightComments = contents.match(/\/\*\*(?:[^*\/]|\*(?!\/)|\n)*?@license(?:.|\n)*?\*\//gm);
        if (extractedCopyrightComments) {
            copyrightComments = extractedCopyrightComments.join('\n') + '\n';
        }

        if (minify) {
            contents = glslStripComments(contents);
            contents = contents.replace(/\s+$/gm, '').replace(/^\s+/gm, '').replace(/\n+/gm, '\n');
            contents += '\n';
        }

        contents = contents.split('"').join('\\"').replace(/\n/gm, '\\n\\\n');
        contents = copyrightComments + '\
//This file is automatically rebuilt by the Cesium build process.\n\
define(function() {\n\
    \'use strict\';\n\
    return "' + contents + '";\n\
});';

        fs.writeFileSync(jsFile, contents);
    });

    // delete any left over JS files from old shaders
    Object.keys(leftOverJsFiles).forEach(function(filepath) {
        rimraf.sync(filepath);
    });

    var generateBuiltinContents = function(contents, builtins, path) {
        var amdPath = contents.amdPath;
        var amdClassName = contents.amdClassName;
        var builtinLookup = contents.builtinLookup;
        for (var i = 0; i < builtins.length; i++) {
            var builtin = builtins[i];
            amdPath = amdPath + ',\n        \'./' + path + '/' + builtin + '\'';
            amdClassName = amdClassName + ',\n        ' + 'czm_' + builtin;
            builtinLookup = builtinLookup + ',\n        ' + 'czm_' + builtin + ' : ' + 'czm_' + builtin;
        }
        contents.amdPath = amdPath;
        contents.amdClassName = amdClassName;
        contents.builtinLookup = builtinLookup;
    };

    //generate the JS file for Built-in GLSL Functions, Structs, and Constants
    var contents = {amdPath : '', amdClassName : '', builtinLookup : ''};
    generateBuiltinContents(contents, builtinConstants, 'Constants');
    generateBuiltinContents(contents, builtinStructs, 'Structs');
    generateBuiltinContents(contents, builtinFunctions, 'Functions');

    contents.amdPath = contents.amdPath.replace(',\n', '');
    contents.amdClassName = contents.amdClassName.replace(',\n', '');
    contents.builtinLookup = contents.builtinLookup.replace(',\n', '');

    var fileContents = '\
//This file is automatically rebuilt by the Cesium build process.\n\
define([\n' +
        contents.amdPath +
        '\n    ], function(\n' +
        contents.amdClassName +
        ') {\n\
            \'use strict\';\n\
            return {\n' + contents.builtinLookup + '};\n\
});';

    // fs.writeFileSync(path.join('Source', 'Shaders', 'Builtin', 'CzmBuiltins.js'), fileContents);
    fs.writeFileSync("Build/result.js", fileContents);
}

在webstorm中运行【Show Gulp Task】,

这里运行我们创建好的build,然后创建好result.js文件,需要将该文件改为CzmBuiltins.js,放到我们需要的目录。

然后就配置源代码,将github上面下载的源代码配置成如下图所示。注意:Shader目录下的glsl后缀的文件转换为.js后缀的文件。这里可以从边缘好的cesium工程文件中复制过来,当然也可以自己编译。

扫描二维码关注公众号,回复: 5468310 查看本文章

针对从编译好的cesium上面下glsl转换为js代码会出现如下的错误。

一般这种是路径的问题。定位到错误的地方

at ShaderCache.getShaderProgram (http://localhost:8080/Cesium/Code/js/CesiumAPI/Source/Renderer/ShaderCache.js:100:55

at SkyAtmosphere.update (http://localhost:8080/Cesium/Code/js/CesiumAPI/Source/Scene/SkyAtmosphere.js:213:50)

显然根据上面的提示,显示的是路径未定义。可以看得出,这么需要重新修改一下代码。移过来的代码中,将下图中的右上方的红框的代码去掉。

最后,启动tomcat服务器,输入地址,可以看到如下的界面。

说明我们的源代码已经配置好了。


                                                                        更多内容,请关注公众号

                                                              

猜你喜欢

转载自blog.csdn.net/u010608964/article/details/87618791
今日推荐