I'm glad you are still interested in reading the source code in the impetuous era ,CesiumJS It has been more than ten years , The code volume has also accumulated more than 300000 lines （ Uncompressed state ）.

I am also honored that my article can be read by readers , If it helps you 、 Inspiring , A compliment is my greatest encouragement , Be deeply grateful . This series of articles was written in 2022 year , Combing is CesiumJS The main source code structure in the front-end Library , Shader principle is not involved 、WebGL The analysis of effect principle and other contents are relatively specific 、 The content of the article can be published independently .

If you want to see the article catalogue , Directly pull to the last section of this article .

1. Detailed explanation of source code project directory

Preposition

  • When I'm saying “xx Instructions ” when , refer to package.json Under the node-script（ namely scripts One of the list ）, have access to npm、yarn perhaps pnpm function ;
  • When I'm saying “ Developer page ” when , It means that you download the dependencies of the source code project , start-up start Instructions , Start the local development server , Open the homepage ;
  • CesiumJS refer to Source The source code of the front-end Library under the folder + Test code + Front end static resources + Construction and source code development tools , The front-end library is Cesium.js It's just CesiumJS The main building products of .

① The root directory

  • gulpfile.cjs：gulp Configuration file for , There are several. node-script It's with the inside gulp Task related ;
  • CONTRIBUTORS.md： All involved CesiumJS List of contributors to the project ;
  • CHANGES.md： Post a journal ;
  • index.html & server.cjs：CesiumJS This project uses express This library , Allow you to use start This node-script Start a local express The server , The default port is 8080, Open the developer page , That is to say index.html;
  • CONTRIBUTING.md： How to participate in contribution , That is, developers or bug Discoverer's Guide ;
  • .husky：CesiumJS Use husky + lint-staged + prettier To manage code styles ;

② Source Catalog

CesiumJS Front end Library of , Mainly in Source In the catalog . at present ,Source Most of the code files in the directory have been completed ESModule reform , Containing a small amount of css file .

Although almost all the source code is ESModule Of , But this Source The catalog doesn't have node Package classic index file index.js;Source Directory entry index file , Is to run build It will appear after the instruction , The file name is Cesium.js; There is nothing in this entry index file , It mainly exports all modules in the source code , Whether public or private , And shader strings , And current CesiumJS Version number of .

Following pair Source The subfolders of the directory are explained ：

  • Assets, Some static resources , For example, the default sky box 、 Offline two-level world image （TMS） etc. ;
  • Core, mathematics API、Geometry API、 High frequency auxiliary function 、 Resources and requests API、Terrain API etc. ;
  • DataSources, be based on Scene The lower three-dimensional in the module API The upper layer encapsulated again API, Include Entity API、Property API and DataSource API, Designed to make it easier to access human friendly data formats , for example Gpx、KML、GeoJson as well as CesiumJS Officially designed Czml, After reading it, you can create it by yourself , These three API To combine Viewer Use , A separate Scene Module cannot run ;
  • Renderer, Generally, the code under this folder is Renderer modular , Encapsulates and extends WebGL The native interface , for example Framebuffer Corresponding WebGLFramebuffer etc. ;
  • Scene, Scene module , be based on Core Module and Renderer modular ,CesiumJS The three-dimensional world of is created by this module , Include Primitive API、Model API、Globe/QuadtreePrimitive API、GPUPicking API、3DTiles API And so on API, Usually called Scene modular , yes CesiumJS Cornerstone ; contain ModelExperimental New architecture and GltfPipeline Sub module ;
  • Shaders, The suffix is .glsl Shader code file ,build After the instruction is run, a ESModule js Module file , String to export shader code ;
  • ThirdParty, Third party Library , for example draco Decoding library and related worker etc. ;
  • Widgets, belt UI Some functional classes of , For example, we are familiar with Viewer、Timeline、BaseLayerPicker, Style files are also in this directory ;
  • Worker & WorkerES6,WebWorker file , The latter is the source code , The former is based on the latter in operation build Generated after instruction requirejs edition .

③ Specs Catalog

This is the test code directory . Subdirectory structure and Source The next is basically the same , To test a module , Then the test file takes the file name of that module + Spec The tails are , For example, I want to test Core/Matrix4.js Fourth order matrix class under module , Then create a Specs/Core/Matrix4Spec.js（ The official has , You can open the learning ）.

The test framework is jasmine-core.

④ App Catalog

Use Source The source code under the directory directly creates ready-made applications , Including what we are familiar with Sandcastle（ Sandbox ） Program , There are two simple , Interested in opening it by yourself （ Use start This command starts the development server , Enter from the homepage ）. Contains a small amount of test data .

⑤ [ After construction ] Build Catalog

function build/combine/minify Such as instruction , This folder will appear . It is mainly released CesiumJS Of iife Library version , As well as the four mandatory static resource folders - Assets、ThirdParty、Widgets、Workers.

Depending on the instructions , released iife The library version is different , It also affects whether there is TypeScript Type definition file 、SourceMap The mapping file .

combine The instruction issued is CesiumUnminified Uncompressed version , That is, the main library file has 37 Wanxing version ;minify The instruction issued is Cesium Compressed version under folder , The code has been simplified .

As shown in the figure below ：

⑥ Documentation Catalog

Document directory , Use generateDocumentation Instruction generated API manual , You can go in from the developer homepage .

⑦ ThirdParty Catalog

Third party dependency Library ,CesiumJS Do not want to install on node-package-dependencies The ones in the list are here , Manual upgrade , And write the dependency list to ThirdParty.extra.json In the file .

Whenever executed prepare This node-script after ,gulp Will put some resources in this directory （ The test framework 、Draco Kuo et al ） Copy to the specified location .

⑧ Tools Catalog

gulp Tool libraries or configurations required for some tasks , for example rollup Additional configuration 、jsdoc Configuration etc. .

Possible future improvements

It has been discussed in the official forum monorepo Technology access , That is, the structure of a project with multiple sub libraries , see ：Is there interest in a compact Cesium math library?

But I think 3DTiles 1.1 The promotion is over 、 Before the build tool exchange , This may not have any substantive impetus , After all CesiumJS It's already ESModule Format , And various internal logics may be improved at any time according to changes in demand , hold CesiumJS Disassemble by itself monorepo It may not be realistic .

2. Build command

since CesiumJS As a NodeJS Package exists , So it supports node-script, That is to say package.json Inside “scripts” list .

First introduce the common instructions used in source code development ：

  • prepare, Before you install dependencies （npm install） A command that will be automatically pulled up after , Will execute gulp Task with the same name , And install husky library ;
  • build, The first instruction , take Source The source code under is merged into one Source/Cesium.js, That is to say CesiumJS Source code ESModule Entrance file , At the same time, I will put Source/Shaders All of them glsl The file is copied and rewritten into the exported shader string js file ; in addition , Only after this instruction is run can the developer's sample code be seen in the sandbox ;
  • start and startPublic, Start development server , The latter allows public access to the machine , Default 8080 port
  • release, A compound instruction , Run successively build → build-ts → combine → minifyRelease → generateDocumentation Instructions ;
  • generateDocumentation, Use jsdoc according to Source Source code annotation generation under API Help document ;
  • makeZipFile, A compound instruction , First run release The specified file is compressed into a zip file , That is, at the beginning of each month, you are GitHub The slightly larger compressed package downloaded from the release page ;
  • combine, Also in the project gulp Default task for , It will connect build Instructions are executed together , take Source Use the source code under rollup Translate into iife library , Output to Build/CesiumUnminified Under the table of contents , Is an uncompressed version Library ,37 Line ten thousand , Master file 12.3 MB;combienRelease No output sourcemap file ;
  • minify, And combine Same purpose , Just tell rollup To generate a compressed version of the Library , Output to Build/Cesium Under the table of contents ; Also have minifyRelease Sister orders ;
  • clean, clear build/release/combine Output file generated by such instructions , Restore the clean engineering state when it was not built

Then there are other things that may be used ：

  • prettier and prettier-check, Unified code style
  • test A series of test Instructions ： function Specs Test code under the directory

Finally, there is a hidden instruction , This allows you to jsdoc Comments are private API, namely @private The annotations , Also shown in the developer documentation , But this instruction is not in node-script In the list .

npm run generateDocumentation -- --private

This function comes from PR CesiumGS/cesium#10261

Possible future improvements

The official test is in use esbuild improvement gulp and rollup Build performance and quality , Reference resources ：CesiumGS/cesium#10399, Currently known to use esbuild The volume of the main library after construction 、SourceMap The volume of files has decreased significantly .

The author also participated in the discussion when the official forum launched this topic ：CesiumJS Build Tooling Revamp

I hope to use a library with smaller file size in the near future .

3. List of articles

This is the source code engineering structure .

CesiumJS 2022^ Source code interpretation [0] - Article directory and more related articles of source code engineering structure

  1. 【 Android Benz 】Android System source code （ One ） The source code for 、 Source directory structure and source reading tools

    Preface         The ancients often said ,“ Familiar with 300 tang poems , You can sing even if you can't write a poem ”, It shows that reading a lot of famous poems is very helpful for learning to compose poems . It's the same with development ,Android The source code is the best in the world Android Code written by engineers , It's also A ...

  2. Step by step windows edition ijkplayer The sixth of the series ——SDL2 Source code analysis OpenGL ES stay windows Render passes on

    Step by step windows edition ijkplayer One of a series of articles --Windows10 Platform compilation ffmpeg 4.0.2, Generate ffplay Step by step windows edition ijkplayer The second in the series --Ijkpl ...

  3. centos 7 Next rabbitmq 3.8.0 & erlang 22.1 Source code compilation and installation

    centos 7 Next rabbitmq 3.8.0 & erlang 22.1 Source code compilation and installation Please check before installation erlang and rabbitmq Whether the version matches the reference :RabbitMQ Erlang V ...

  4. 【 Learn the source code together - Microservices 】Nexflix Eureka Source code 13 ：Eureka The source code interpretation is over ~！

    Preface What I want to say [ Learn the source code together - Microservices -Netflix Eureka] The column is all over here . To be honest , From the very beginning Eureka Server and Eureka Client The initialization process is still boring , To present ...

  5. Compile the language technology platform cloud of Harbin Institute of technology LTP（C++） Source code and LTP4J（Java） Source code

    from : Compile the language technology platform cloud of Harbin Institute of technology LTP(C++) Source code and LTP4J(Java) Source code JDK:java version “1.8.0_31”Java(TM) SE Runtime Environment ( ...

  6. 【 Learn the source code together - Microservices 】Nexflix Eureka Source code 10 ： Service offline and instance removal , One client How long will offline be perceived by other instances ？

    Preface Previous review Last time we talked about client To the end server Send heartbeat check , It's also the default 30 The clock sends once ,server After receiving, the client will update a timestamp property of the registry , And then a heartbeat ( The contract ) And we're done . This lecture catalog this ...

  7. [Spark kernel ] The first 32 course ：Spark Worker Principle and source code analysis and decryption ：Worker Work flow chart 、Worker start-up Driver Source code decryption 、Worker start-up Executor Source code decryption, etc

    Topic of this lesson Spark Worker principle Worker start-up Driver Source appreciation Worker start-up  Executor  Source appreciation Worker And Master Interaction of [ The introduction part : You want readers to ...

  8. 【 Streaming media development 】VLC Media Player - Android Platform source code compilation And Secondary development details ( Provide details 800M Download good source code and eclipse Debuggable player source code download )

    author : Han Shuliang   Blog address : http://blog.csdn.net/shulianghan/article/details/42707293 Reprint please indicate the source : http://blog.csd ...

  9. Tomcat Source code analysis one ： compile Tomcat Source code

    Tomcat Source code analysis one : compile Tomcat Source code 1 Content introduction Prior to <Servlet And Tomcat Run the example > In the article , How to bring you to Tomcat Deployment in China Servlet Relevant steps of application , This article will ...

  10. Android Source code analysis （ 11、 ... and ）-----Android How to reference in the source code aar file

    One :aar How to reference a file System Settings I quote bidehelper-1.1.12.aar File as an example Source code address :packages/apps/Settings/Android.mk LOCAL_PAT ...

Random recommendation

  1. Area Area

    1.mvc4.0 Newly added area Regional mechanisms , Can help you in the construction of larger projects , Let the functions with high independence become an independent MVC Subsites , To reduce the coupling between websites , It can also be done through area Cutting of , When having multiple people develop the same project at the same time ...

  2. Effective C++ ----- Clause 31： Minimize compile dependencies between files

    Support “ Compilation dependency minimization ” The general idea is : Depending on the declarative form , Don't depend on the definition . The two tools based on this idea are Handle classes and Interface classes. The library header file should be in “ Complete and only declarative ...

  3. [Architecture Pattern] Singleton Locator

    [Architecture Pattern] Singleton Locator Purpose Components are provided by themselves Service Locator Pattern , Used to reduce the coupling of components . scene In developing the system , At the bottom Infrast ...

  4. JSP_EL Use

    JSP in EL Simple introduction and use of expressions   Reference material : http://www.java3z.com/cwbwebhome/article/article8/8124.html?id=2453   http ...

  5. Java process CPU High utilization rate

    Java process CPU High utilization rate production java application ,CPU Usage has always been high , Often reach 100%, Perfect solution through the following steps , Share it .1.jps obtain Java Process PID.2.jstack pid >> ...

  6. jvm Study note 2 （ Reduce GC Overhead advice ）

    One : Trigger master GC(Garbage Collector) Conditions JVM Make... Times GC High frequency of , But because of this GC It takes a very short time , Therefore, it has little impact on the system . More noteworthy is the Lord GC The trigger condition of , Because its impact on the system is obvious . total ...

  7. I'll show you MySQL And MySQL Architecture

    order I've been busy with projects recently , All kinds of overtime , Project online . Gradually there is no time to learn . see , Just a few days ago, take some time . Steal a little leisure from the rush of business , Reading a database book . I believe many friends have also seen it - - <MySQL Technology insider : ...

  8. JAVA SortedMap Interface

    SortedMap The interface mainly provides orderly Map Realization . Map The main realization of HashMap,TreeMap,HashTable,LinkedHashMap. TreeMap Realized SortedMap Interface , To ensure the ...

  9. P2564 [SCOI2009] a birthday present greedy

    https://www.luogu.org/problemnew/show/P2564) The question Yes n A bead , Include k Medium color , Find the interval with the smallest length , Make this section contain all colors . Ideas hold n Beads in place ...

  10. Linux Learning materials website summary link （ Continuous updating ing）

    In no particular order . There's no end to learning how to make a boat . Blog : 1.slmba:LINUX Blog original cattle 2.edsionte's TechBlog:Linuxer ( There's a bunch of other links in his list Linuxer, Blocked by the company . ...