- 博客(87)
- 收藏
- 关注
原创 WebGPU Inter-stage 变量
这是在顶点着色器和片段着色器之间增加 Inter-stage 变量的一种简便方法。然后,我们不再只返回一个表示位置的vec4f,而是声明一个结构体的实例,填充并返回它。在片段着色器重,我们声明将其中一个结构体作为参数的函数。然后,我们声明顶点着色器将返回该类型的结构体。变量在顶点着色器和片段着色器之间发挥作用。我们创建一个有3种颜色的数组。这里我们声明了一个结构体。
2024-02-07 18:00:54 327
原创 Cesium 性能优化 - 学习笔记
获取或设置呈现分辨率的比例因子。小于 1.0 的值可以提高功能较弱的设备的性能,而大于 1.0 的值将以更高的分辨率呈现,然后按比例缩小,从而提高视觉保真度。例如,如果构件的布局大小为 640x480,则将此值设置为 0.5 将导致场景以 320x240 渲染,然后在将其设置为 2.0 时放大将导致场景以 1280x960 渲染,然后按比例缩小。图上渲染内容多的时候,我的cpu会疯狂的转,声音特别大,在测试提高帧率的时候,发现了参数requestRenderMode;
2023-11-30 17:32:12 899
原创 Cesium 中对entities的查询,删除操作
这里要传入一个ID,这个ID就是我们在创建 entities 时的ID。在Cesium 中我们如何对entities进行查询,和删除操作。
2023-11-29 17:28:38 331
原创 Cesium中对Cesium.Cesium3DTileset模型进行偏移
但是很多时候,我们添加的3D Tiles 模型他的位置,并不是我们想要的位置。由于单个瓦片的位置信息是写到了数据中的(.b3dm 和对应的 json 文件中), 如果能整体调整加载后的 Tileset,就是最好的选择。3DTiles 数据集以分块,分级渲染,将大数据量三维数据以分块,分层的形式组织起来,可以大量减轻浏览器和GPU的渲染压力。这里面说,一个三维场景中,要包含:视图矩阵,投影矩阵,模型矩阵。模型矩阵: 就包含了,这个模型的各种变换,平移,旋转,缩放。这三个矩阵也有统称为: MVP矩阵。
2023-11-29 14:38:24 480
原创 postprocessing 的 SelectiveBloomEffect 泛光效果
初始化SelectiveBloomEffect。添加renderPass。
2023-08-07 17:22:16 158 2
原创 postprocessing 的 GodRaysEffect 的使用
GodRaysEffect 的后期效果需要一个物体,就是确定那个物体发光。初始化 GodRaysEffect。添加renderPass。
2023-08-07 15:41:58 79
原创 THREE.JS合并物体工具提升渲染性能
three.js 中 BufferGeometryUtils.mergeBufferGeometries可以实现,渲染大量的具有相同材质,但可以几何体不同的的网格。创建10000个TorusKnot几何体,然后将他添加到 geometries 数组中。将这10000个网格进行合并。例如渲染10000个网格。
2023-05-21 01:51:35 457
原创 three.js使用InstancedMesh大场景渲染大量相同物体的实例化网格
在three.js中有时候我们需要渲染大量的相同几何体,材质的网格,但是如果用一般的方法来实现的花,通常性能不佳,卡顿。但是如果我们使用InstancedMesh来渲染的话,会大大的解决卡顿,性能更佳。例如我们创建1000个立方体,添加到场景中。这样的方法渲染器会调用很多次。
2023-05-21 00:53:29 687 1
原创 three.js中使用shaderPass实现自定义合成效果
纹理采样,他是将原本渲染的画面进行纹理采样vec4 color = texture2D(tDiffuse, vUv);来还原当前默认的画面是怎么样的;但是有时候,有些效果没有现成的,这个时候可能需要我们去编写shader来实现这个效果,而在合成效果中编写shader是通过shaderPass来实现。在three.js中提供了许多的合成效果,例如ClearPass,CubeTexturePass,BloomPass…此时如果我们想再往上添加什么效果,都是在color上添加,例如。
2023-05-20 22:33:09 444
原创 three.js 添加合成效果 EffectComposer
添加我们自己想要的效果, DotScreenPass。three.js中提供了很多的合成效果。这样的效果是使用合成效果实现,此时我们需要改变渲染方式。
2023-05-20 18:18:31 138
原创 cesium中如何添加自定义材质,编写shader
cesium中提供了接口,让我们开发者在cesium中编写底层的shader着色器代码,达到一些酷炫的效果fabric : {} ` } })最简单的模板就是这样,source是glsl的源代码,这里定义了一个函数czm_getMaterial,在后续的代码中会调用这个czm_getMaterial函数,这个函数返回了一个材质,我们只有将这个material,的一些属性进行修改即可。例如:diffusealpha至于这些属性表示什么意思,需要查看cesium对这块的文档说明。
2023-05-20 01:37:41 1282 1
原创 cesium中如何修改图层的着色器,使其达到我们想要的图层风格
这里面的字符串是glsl代码,我们使用字符串的replace函数来替换掉我们想替换的代码。在cesium中我们可以,通过修改图层的着色器源代码使其达到一些酷炫的效果,现在我们。好现在 baseFragmentShader里面就是图层的着色器代码。这样就做到了,修改glsl代码的效果。这样就可以达到一些自定义的图层效果。获取图层对应的片源着色器源代码。来说说如何做到这一切。
2023-05-20 01:16:09 643 2
原创 如何在THREE.JS 中编写shader
我们只需要在vertexShader,fragmentShader提供响应的着色器代码即可,至于怎么编写这个着色器代码,完全由开发者自己决定。要在three.js中编写底层着色器,我们需要借助 THREE.ShaderMaterial来实现。
2023-05-18 12:01:28 237
原创 glsl着色器编写随机函数
在glsl中好像没有默认的随机函数,所以一般都需要我们自己去定义,去实现这个随机函数。所以我们最终的随机函数是这样的。
2023-05-17 22:14:16 210
原创 uniapp,app端时input组件弹起系统键盘时,键盘会顶住页面导致页面会上移
App平台软键盘弹出有 adjustResize|adjustPan 两种模式,默认为 adjustPan 模式,小程序平台只支持 adjustPan 模式,H5平台因不同浏览器而异。配置方式,在 pages.json 中配置 style。这个时候,我们可以修改键盘的弹出模式。
2023-04-06 10:45:15 1441 1
原创 go 中引入自定义包,报错 invalid import path
系统环境变量中的 $GOPATH变量对应的值自己要导入包的路径而我们在导入包的时候其实最后是拼接成所以最后我们最好是在 $GOPATH这个环境变量对应的值的路径的 SRC 目录创建我们的项目。
2022-11-08 00:06:38 2978 2
原创 Vite打包 - 打包体积可视化面板
其次在 vite.config.js中配置,和使用这个插件。最后运行打包命令,之后在浏览器就显示对应的可视化面板。首先我们下载对应的插件。
2022-10-18 23:21:11 810 2
原创 Vite基础配置之 - 分包
比如说,我使用了 loadsh.js 的东西,那么我们在打包的时候,就会把 loadsh 相关资源也会打包进来,这个是没有问题的,此时是将 loadsh 的东西 与 我们自己写的相关代码合成一个文件,记住是一个文件。而且,这个文件的名字,每一次都会发生变化的(源代码发生变化),所以当用户去访问我们的页面时,请求的资源文件内容有 : 第三方资源包代码 + 自己的业务代码,而真正需要跟新的只有 自己的业务代码,所以我们进行分包,在vite.config.js中的。还是举个例子,来回忆一下吧,什么呢?
2022-10-18 23:06:07 4167 1
原创 《Vue设计与实现》第四章 第五节 调度执行(二)
我们要在上一章的基础上,实现一个功能。输出由输出可知,字段obj.foo的值一定会从1自增到3,2只是它的过渡状态。如果我们只关心最终的结果而不关心过程,那么执行三次打印操作是多余的,我们期望的打印是:解决办法`代码effect中...
2022-06-05 15:45:23 120
原创 《Vue设计与实现》第四章 第五节 调度执行
我们如果能实现,决定副作用函数执行的时机,次数及方式。我们可以为effect函数设计一个选项参数options,允许用户指定调度器。effect函数定义时
2022-06-05 02:29:41 363
原创 《Vue设计与实现》第四章 第四节避免无限递归循环
上面的代码,会导致无限的递归循环。因为在这个语句中,既会读取obj.foo的值,又会设置obj.foo的值,而这就是导致问题的根本原因。如何解决如果trigger触发执行的副作用函数与当前正在执行的副作用函数相同,则不触发执行。...
2022-06-05 02:06:11 246
原创 《Vue设计与实现》第四章 第三节 嵌套的effect
嵌套的effect代码从上面这段代码的执行来看effect函数的定义结果时这样的结论如何解决这个问题4. 我们需要一个副作用函数栈 effectStack。5. 在副作用函数执行时,将当前的副作用函数压入栈中。6. 待副作用函数执行完毕之后将其从栈中弹出,并始终让activeEffect指向栈顶的副作用函数这样就完美的解决了这个effect嵌套的问题。...
2022-06-05 00:56:48 204
原创 《vue设计与实现》第四章 分支切换与 cleanup
在上一章节中,我们实现的响应式系统还存在一个问题那就是在三元运算符中一开始 obj.ok 的初始值为 true, 回导致副作用函数执行时,会有obj.ok, obj.name 两个属性的读取操作。但是当我们将 obj.ok 的值修改为 false时,会重新触发副作用函数因为obj.ok的值为 false,所以是不会有读取 obj.name操作的。意思就是,往后接下来 obj.name修改了,是不会也不需要触发副作用函数的执行,但是按照上一章的代码实现,是不同实现这个功能的。总结该如何解决呢?
2022-06-04 22:10:55 411
原创 《Vue设计与实现》第四章 设计一个响应设系统
我们创建了一个 WeakMap(),将来我们会往里面添加一系列数据。但是往里面添加数据,要符合一定的数据结构。好,现在让我们来编写代码在fn()函数执行时,因为有 obj.name 读取操作,就会触发 get() 拦截器。然后会根据,obj , name初始化一系列的数据结构。并且会将 fn 函数添加到 name 对应的 new Set()桶中。第二次修改在第二次修改中,会触发 set () 函数,导致 name 对应的 new Set()桶中的函数全部执行。最终的效果就是....
2022-06-04 18:38:13 197
原创 Vite的优化配置
1. Vite的优化配置目录base别名打包压缩代码生产环境下清空console.log打包出的文件整理创建一个 Vite 构建的 Vue-TS 项目npm create vite@latest my-vue-app -- --template vue2. base这个是给每个资源,设置一个跟路径,这个是在生产环境下才会由效果的。这个可以解决在项目部署时,有些资源访问不到的问题。我们看到,这个 img 的路径是 /src/assets/logo.png 的。这个会有一个问题,
2022-05-04 15:05:44 3832 2
原创 Cesium中添加entitie模型,实现贴地。
1.Cesium中添加entitie模型,实现贴地。2. 添加模型const createModel = (url) => { const entity = viewer.entities.add({ name: '这是一个模型', position: Cesium.Cartesian3.fromDegrees({ -123.0744619, 44.0503706, 100 }), model: { uri: url, minimumPixelSize: 128,
2022-03-20 01:50:09 4390 1
原创 Vue3.x的expose是什么?
1.Vue3.x的expose是什么?一个将暴露在公共组件实例上的 property 列表默认情况下,通过 refs、refs、refs、parent 或 $root 访问到的公共实例与模板使用的组件内部实例是一样的。expose 选项将限制公共实例可以访问的 property。好上面是vue官方的解释,现在我举个例子。父组件<template> <div>我是一个父组件</div> <!--HelloWorldVue 是一个子组件或者一个公共组件
2022-02-16 23:44:37 2299 7
原创 vue3.x的自定义指令动态指令参数
1.vue3.x的自定义指令参数import { createApp } from 'vue';import App from './App.vue';app.directive('time', { created() { console.log('created生命周期函数') }, beforeMount:(el) => { // console.log(binding, '什么') el.style.color = '
2022-02-12 01:49:35 3348 6
原创 Vue3.x的自定义指令
Vue3.x的自定义指令以input获取焦点为例定义全局自定义指令import { createApp } from 'vue'import App from './App.vue'const app = createApp(App)app.directive('focus', { mounted(el) { el.focus() }})app.mount('#app')使用全局自定义指令<input v-focus /> 注册局部自定
2022-02-11 10:27:36 536
原创 TypeScript类的接口
1.TypeScript类的接口1.类 与 接口// 接口interface interHuman { speak():any;}// 类class Human implements interHuman { speak() { console.log('我可以说话') }}这是最简单的用法,接口 interHuman对 Human 类的约束。2.一个类可以使用两个或者多个接口进行约束。// 接口 1interface interHuman { speak():any;
2022-02-01 21:03:08 830 2
原创 vue3.x过滤器
1.vue3.x过滤器vue3.x是不再支持过滤器了,已经将器移除了。取而代之的是:计算属性,方法vue过滤器2.计算属性<template> <button @click="changzhangs">修改张三</button> <div>{{changeName}}</div></template><script>export default { data(){ return {
2022-01-31 15:28:01 1601
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人