Pale Bule Dot

前言学习资料：The Book of Shaders: Shaping functions 记录-shapesstep(float edge, float x)类似于if vec3(float * float) 相当于把两个进行and uniform vec2 u_resolution;void main(){ vec2 st = gl_FragCoord.xy/u_resolution.xy; vec3 color = vec3(0.0); // Each result will return 1.0 (white) or 0.0 (black). float left = step(0.1,st.x); // Similar to ( X greater than 0.1 ) float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 ) // The multiplication of left*bottom will be similar to the lo ...

前言学习资料：The Book of Shaders: Shaping functions 记录-color部分vec4 vector;vector[0] = vector.r = vector.x = vector.s;vector[1] = vector.g = vector.y = vector.t;vector[2] = vector.b = vector.z = vector.p;vector[3] = vector.a = vector.w = vector.q; 支持swizzle(搅动)：vec3 yellow=vec3(1.,1.,0.); yellow.rgb, yellow.rgr, yellow.bgr …… 利用mix()进行color混合：mix(color1,color2,value) ，value从0到1，value越小color1值越多 #ifdef GL_ESprecision mediump float;#endifuniform vec2 u_resolution;uniform float u_time;vec3 colorA = ...

前言学习资料：The Book of Shaders: Shaping functions GLSL Editor (thebookofshaders.com) 在线的shader编辑调试 patriciogonzalezvivo/glslGallery (github.com) 看着不错，但是提交自己的上去后，提交不到对应的服务器（直白些就是俺试完了用不了。。。。。 GLSL Gallery (patriciogonzalezvivo.github.io) 作者的一些shader，可以借鉴学习 记录shaderGPU特点：blind（不知道其他的pipe/thread在干啥），memoryless（不知道以前干了啥） 片元着色器： void main() {} 主函数 内置全局变量，如gl_FragColor 默认输出：gl_fragColor 默认输入：gl_fragCoord (是varing) // x,y都从0到1 数据类型，vec4，精度如float 标准化normalized, 映射map 宏，#defines, ...

初步了解Cesium官网 Cesium: The Platform for 3D Geospatial CesiumJS:CesiumJS Quickstart – Cesium Cesium for Unity:Cesium for Unity – Cesium Hello React Cesium - 知乎 (zhihu.com) React集成Cesium+ThreeJs流程汇总_react cesium-CSDN博客 基础教程Cesium学习资源汇总 cesium官方案例 Cesium相关资料汇总、汇总2 cesium项目 Cesium中文教程-github, cesium中文网 Cesium源码文件夹cesium官方案例，官方API文档 Cesium基础知识学习链接 Cesium的项目定位：B/S架构下的客户端应用层面的三维开发框架 Cesium的学习路线： Cesium进阶之路： Web前端方向： Cesium与webpack（裁剪以及压缩），Cesium 与vue（框架设计， 嵌入复杂业务系统），Cesium的UI（UI 设计，定制可复用的Cesium交 ...

JS基础 整理自黑马Pink前端的课程资料；算是入门第一步；后续有时间的话，再看看书，多了解了解 Web APIs API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现 Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。 Web API 一般都有输入和输出（ 函数的传参和返回值），Web API 很多都是方法（函数） 学习 Web API 可以结合前面学习内置对象方法的思路学习 1.2. DOM 介绍1.2.1 什么是DOM**文档对象模型（Document Object Model，简称DOM），是 **W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 1.2.2. DOM树 DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档： ...

地理信息集成课程汇报（与TLQ合作，感谢！）

光影人物参考教程：https://juejin.cn/post/7145064095178293285 两个渲染器、相机，一个场景，添加光照； 处理窗口缩放 构建页面结构 css写在外部文件里 构建加载管理器，实现加载页面的下移、消失、移除 加载glb模型，并使用draco进行处理 使用intersection observer进行异步观察 处理鼠标移动下的span效果 调整相机 添加事件监听 注意点： renderer1.outputColorSpace = Three.SRGBColorSpace // API已经改成了ColorSpace why lds-roller has 8 divs? ,用于形成loading旋转的时候的八个点 IntersectionObserverIntersectionObserver 是一个强大的 Web API，用于异步观察一个元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。简单来说，它允许你配置一个回调函数，当被观察的元素以某种方式进入或离开另一个元素的视域时，这个回调函数会被执行。这个功 ...

数字地球星空参考教程：https://juejin.cn/post/7145064095178293285 构建（线框风的地球earth、）环ring、卫星satellite 构建500个随机分布的星星stars 初始化场景，设置光照，关联dom 加载地球的模型和贴图 添加动画 页面中不显示canvas的内容 检查对应的template里的div元素的大小，如果设置不当，就看不到物体； 如果没有把下面的代码放到init里，这个时候container的div还没有创建，获取不到对应的宽高 let container = document.getElementById('container')let sizes = { width: container.clientWidth, height: container.clientHeight,} 页面中看不到物体 确认设置了div的大小: 如果 container的大小为0或非常小，那么 Three.js渲染的内容可能就无法被看到。确保 .fullSize样式被正确应用，并且容器元素确实覆盖 ...

JS基础 整理自黑马Pink前端的课程资料；算是入门第一步；后续有时间的话，再看看书，多了解了解 11. 对象 利用字面量创建对象 使用对象字面量创建对象：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法；{ } 里面采取键值对的形式表示 键：相当于属性名 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）代码如下： var star = {    name : 'pink',    age : 18,    sex : '男',    sayHi : function(){        alert('大家好啊~');   }}; 上述代码中 star即是创建的对象。 对象的使用 对象的属性 对象中存储具体数据的 “键值对”中的 “键”称为对象的属性，即对象中存储具体数据的项 对象的方法 对象中存储函数的 “键值对”中的 “键”称为对象的方法，即对象中存储函数的项 ...

JS基础 整理自黑马Pink前端的课程资料；算是入门第一步；后续有时间的话，再看看书，多了解了解 7. 运算符（操作符）浮点数的精度问题 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。 var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004console.log(0.07 * 100);   // 结果不是 7， 而是：7.000000000000001 所以：不要直接判断两个浮点数是否相等 ! 8. 断点调试断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程 断点调试的流程：1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。3、摁下F11，程序单步执行，让程序一行一行的执行， ...