QQs'Note
0%

Posted on Edited on In

边框

  • box-shadow example
    1
    box-shadow: red 0 0 5px 5px
    颜色可以放在开头或结尾，也可缺省(即#fff) 数值顺序依次x-offset, y-offset, blur radius, spread radius
  • border-image

    背景

    1
    2
    3
    4
    5
    #example1 { 
        background-image: url(img_flwr.gif), url(paper.gif); 
        background-position: right bottom, left top; 
        background-repeat: no-repeat, repeat; 
    }

    渐变

  • 线性渐变 liner-gradient
  • 径向渐变 radial-gradient

    文字特效

  • text-shadow

    转换 过渡 动画

    transform 转换 
    1
    2
    3
    4
    5
    translate() // 移动
    rotate() 
    scale() // 缩放
    skew() // 倾斜
    matrix() // 上述转换的综合
    居中：
    1
    2
    3
    4
    5
    position: 'absolute',
    margin: 'auto',
    top: '50%',
    left: '50%',
    transform: `translate(-50%, -50%)`,
    transition 过渡
    1
    transition:transform 0.5s
    将某个样式的变化加入一定过渡动画
    animation 动画
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div
    {
        animation: myfirst 5s;
        -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
    }
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }
     
    @-webkit-keyframes myfirst /* Safari 与 Chrome */
    {
        from {background: red;}
        to {background: yellow;}
    }

    transparent vs rgba(0,0,0,0)

优先级

  • 相同选择器 层叠覆盖
  • 具体、特异性强的选择器优先级高：类选择器 > 元素选择器

    中空元素

    clip-patch

    css实现toggle switch

    how to css switch
    tip：在html中 input:type=checkbox 天生具有bool特征 即以checked属性跟踪状态

    3d效果-prespective, xyz

    Css 3D

    HTML + CSS 实现点击旋转

    1
    2
    3
    4
    <html>
      ...
      <input type="button" class="csd-icon icon-refresh">
    </html>
    目标元素要改为input，因为要用到focus伪类
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .csd-icon.icon-refresh {
      width: 24px;
      height: 24px;
      padding: 0;
      cursor: pointer;
      position: absolute;
      border:hidden;
      background: url("data:image/svg+xml," + map-get($icon,refresh) + "") no-repeat top left;
      right: 0;
      &:focus{
        outline: none;
        animation: rotatefresh 1s;
      }
      &:active{
        animation: none;  
        //background: '#eee';
      }
      @keyframes rotatefresh {
        from { transform: rotate(0deg) }
        to {
            transform: rotate(180deg);
            transition: all 0.6s;
        }
      }
    }

    磨砂特效

    CSS秘密花园:磨砂玻璃效果

    减少异步

    使用形如background: url(‘../../icon.svg’)的样式无疑在渲染页面时又添加了异步调用，页面会出现从图片空缺到图片加载的’跳变’，可以用F12—Performance—Network：slow 3G
    如果是img:src可以直接把svg代码贴在页面上，优点是图像作为页面代码的一部分一次性从服务端获取，缺点是布局代码会被推至很下面，且svg代码的可读性比较差。
    另一种方式是将图片转为encodeURL贴在css中，这样使图片作为css的一部分从服务端获取
    css形如
    1
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox...");
    一个在线转换工具
    见URL Decoder
    将源码\…\贴入，进行转码
    另用scss的预编译过程转换
    见sass-svg

    box-sizing

    当元素特效使用2px border代替1px border时，发现元素宽高变化 布局略微‘抖动’
    应将box-sizing设为border-box
    另可考虑margin减1px
    另margin和box-sizing在flex布局下是无效的

前端小智 CSS特效

Container Query

文字对齐

单行文字可以调整line-hight
行内元素文字内容换行 会向上堆叠 元素高出其他行内元素，竖直方向对齐时，调整其他元素的vertical-align

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="field-label">content:</div>
<div class="field-text">blablablah</div>
<style>
  .field-label{
    display: inline-block;
    width: 8em;
    vertical-align: top;
  }
  .field-text{
    display: inline-block;
    width: 8em;
    word-break: break-word;
  }
</style>

混合模式 mix-blend-mode

mix-blend-mode
将所处位置的层叠像素叠加 可以叠加视频背景
区别于text-fill-color

三角

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
triangle:{
    position:'absolute',
    top:42,
    right:28,
    width:0,
    height:0,
    backgroundColor:'transparent',
    borderWidth:10,
    borderStyle:'solid',
    borderTopColor:'transparent',
    borderRightColor:'transparent',
    borderBottomColor:'white',
    borderLeftColor:'transparent',
    justifyContent:'center',
    alignItems:'center'
}

Canvas 加载后出现滚动条

  • html body需覆盖默认margin padding
  • 父元素100vw 100vh
  • 以父元素clientWidth clientHeight设置宽高
  • canvas默认是行内元素 受到 line-height 或 baseline 对齐的影响 需要 display:block

Posted on Edited on In

资料

见知乎·Angular资料获取不完全指南

异步响应方法中更新数据，视图无法及时更新

解决方法：导入ChangeDetectRef

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { ChangeDetectorRef } from '@angular/core';

constructor(
    private changeDetectorRef:ChangeDetectorRef) { 
        // user token updated!
        this.userService.currentUserToken$.subscribe(res=>{
            if(res){
            this.logged = true;
            this.email = res['UserName'].value;
            this.changeDetectorRef.detectChanges()
            }
        })
    }
}

httpClient的任意方法(get、post)无法发送请求

所在模块未引入HttpClientModule

重复声明Directive

1
2
ERROR in Type NumberInputDirective in D:/ProjectX/src/app/common/number-input.directive.ts is part of the declarations of 2 modules: blablaA and blablaB Please consider moving NumberInputDirective to a higher module that imports blablaA and blablaB. You can also create a new NgModule import that NgModule in blablaA and blablaB

指令是可声明对象。 它们必须在 NgModule 中声明(declarations)之后，才能用在应用中。指令应当且只能属于一个 NgModule。不要重新声明那些从其它模块中导入的指令。

1
2
3
4
5
6
7
8
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberInputDirective } from '../common/number-input.directive';
@NgModule({
    imports: [CommonModule],
    declarations: [NumberInputDirective],
    exports:[NumberInputDirective]
export class SharedModule {}

angular.json “should NOT have additional properties(xxxx)”

因框架版本问题（归根结蒂是包版本差异问题），不支持xxx属性，如angular原生国际化配置v8与v9存在配置差异，查看文档应区分文档版本

关于升级

参考Angular 升级指南

另，@angular/cli和angular-cli 是两个东西，安装了后者可以使用部分ng命令，可知ng version是beta版本，ng update无效且报“does not match any file…”

issue 升级到9后，渲染中止，报“Uncaught SyntaxError: Strict mode code may not include a with statement”

见stackoverflow回答

remove from main.ts

1
export { renderModule, renderModuleFactory } from '@angular/platform-server';

npm ERR! Invalid package name “ngcc_entry_points.json”: name cannot start with an underscore
升级Angular过程中未知package错误 清理依赖重新安装

1
2
3
rm -rf node_modules
rm -f package-lock.json
npm i

css: ng-deep host-context

曾使用ng-inline-svg将svg模板嵌入angular模板(见svg)，插入方式使用的是其定义的指令

1
<div [inlineSVG]="'assets/image/icon.svg'"></div>

目的是使用类似
1
2
3
.nav-checked svg>path{
    fill:red
}

的方式实现动态图标样式
事实上，ng-inline-svg指令将宿主元素（div）作为组件锚点，用svg模板实例化为一个独立组件，宿主元素所在组件的样式无法作用到子组件
Angular官方文档中对于样式‘透传’有如下solution
1
2
3
:host ::ng-deep .nav-checked svg>path{
    fill:red
}

:host表示从本组件开始::ng-deep向下生效
见Doc：组件样式

参考ng-inline-svg issue#14

关于deprecated，是deep与w3c的草案曾用关键字冲突，然而其一Angular尚无替代方案，其二w3c已移除了相关建议，若将来协议落地，Angular亦无须重复实现这个feature(引述：StackOverflow：What to use in place of ::ng-deep)

:host-context可以根据组件外部元素来决定组件内的样式

1
2
3
<nav class="collapse">
<nav-header></nav-header>
<nav>

在NavHeader.component.less
1
2
3
:host-context(.collapse) .title{
    ...
}

Can’t bind to ‘ngForOf’ since it isn’t a known property of XXX

疑似升级至ng11后出现，多个modules，任意组件使用指令均可能报错，解决方法是在所在子模块手动引入CommonModule

1
2
3
4
5
6
7
8
9
10
...
import { CommonModule } from '@angular/common';


@NgModule({
    imports: [SharedModule, CommonModule],
    declarations: [...],
    providers: [],
})
export class ManageModule { }

Posted on Edited on In

须知，VS Code、Slack、Discord 等都是典型 Electron 应用。atom是Electron应用，GeForce Experience也是Electron应用，还有Skype。。。

2026-07 修订：Atom 已经停止维护，Skype 的桌面技术栈也经历过多次变化，不适合作为新的技术判断依据。评价 Electron 时应更多看它的现状：成熟的跨平台桌面壳、稳定的 Chromium/Node.js 集成、较高资源占用、安全边界需要主动设计。

本质是使用 Chromium 浏览器内核和 HTML/CSS/JavaScript 实现应用程序 UI，主进程运行在 Node.js 环境中，负责窗口、菜单、系统能力、文件系统、原生模块等桌面侧能力；渲染进程负责页面 UI。底层业务可以由 JS/TS 组织，也可以通过 Node.js native modules、命令行程序、本地服务、动态库等方式集成其他技术生态。

得益于 HTML UI 开发的方便和 Node.js API 的丰富，App 开发变得方便快捷，而且基于 Web 技术实现了较强的跨平台能力，然而代价如下：

  • 因为不可避免的打包浏览器内核，出品动辄100MB
  • 因为打包的是chrome家的内核，内存占用相当大

如果是 Windows 平台的应用需求，wpf的产品将在体积，资源占用，安全的系统访问等方面碾压electron WPF / WinUI / .NET MAUI / Qt / Tauri / WebView2 这类方案在安装体积、原生控件、系统集成、启动速度等方面可能更有优势；Electron 的优势在于复用 Web 工程能力、跨平台一致性、复杂前端交互、生态成熟和交付速度。

2026-07 新增：选型判断

  • 如果目标是复杂 Web UI、跨平台桌面、频繁迭代、团队前端能力强，Electron 仍然是务实选择。
  • 如果目标是轻量 Windows 工具、强系统集成、低内存占用，优先评估 WPF/WinUI/WebView2/Tauri。
  • 如果目标是工业 HMI、设备调试、机器人可视化工具，Electron 的价值不在“壳”，而在 Web3D、实时数据面板、日志、状态机、诊断工具和跨平台交付。

知乎：为什么用 electron 开发的桌面应用那么多？

构建项目框架

0. 脚手架 npm i -g angular-cli electron

2026-07 修订：不建议全局安装旧 angular-cli 或 electron 来创建项目。优先使用当前脚手架和本地 devDependency。

通用 Electron 项目：

1
npx create-electron-app@latest my-app --template=vite-typescript

已有项目引入 Electron Forge：

1
2
npm install --save-dev @electron-forge/cli
npx electron-forge import

Angular + Electron 项目仍可行，但重点不再是修改 Angular webpack target，而是明确三个入口：

  1. Renderer：Angular/Vite/Webpack 构建出的前端页面。
  2. Main：Electron 主进程入口，如 main.ts / main.js。
  3. Preload：安全暴露给渲染进程的桥接 API，如 preload.ts / preload.js。

Caution! 新版本electron嵌入了nodejs运行时，故而系统安装的nodejs环境仅用于执行npm install —save-dev electron，与之后的开发运行再无关系

2026-07 修订：这句话方向正确但不完整。开发机仍然需要 Node.js/npm 来安装依赖、运行脚本、打包和执行构建工具；Electron 应用运行时使用 Electron 自带的 Node.js。判断运行时版本应看 process.versions.electron、process.versions.chrome、process.versions.node，而不是系统 node -v。

以angular-electron为例，npm run start过程，

1
2
3
4
"start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
"postinstall:electron": "node postinstall",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve,
"electron:serve-tsc": "tsc -p tsconfig-serve.json",

  1. 调用postinstall (postinstall.js)修改angular的webpack target
  2. 随后运行ng serve
  3. 连接ng serve启动的localhost:4200
  4. 调用tsc编译main.ts此时生成了main.js
  5. 执行electron .

    webpack target

IPC

IPC 代表 Inter-Process Communication 进程间通信。Electron 使用 IPC 在 main 主进程和 renderer 渲染进程之间传递消息。

2026-07 修订：不要把 ipcRenderer 或任意 Electron API 直接暴露给页面。现代 Electron 默认建议 nodeIntegration: false、contextIsolation: true，通过 preload + contextBridge 暴露白名单 API。IPC 也不只传 JSON，通常使用结构化克隆可传递的值；设计上仍应保持参数简单、可校验。

main

1
2
3
4
5
6
7
const { ipcMain } = require('electron')

ipcMain.handle('settings:load', async (event) => {
  // TODO: 校验 event.senderFrame.url / origin，只响应可信页面
  return { theme: 'dark' }
})


preload
1
2
3
4
5
6
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  loadSettings: () => ipcRenderer.invoke('settings:load')
})


renderer
1
const settings = await window.electronAPI.loadSettings()

2026-07 新增：IPC 设计要点

  • 一类能力一个明确 channel，例如 settings:load、file:pick、device:connect。
  • 主进程必须校验参数、来源和权限，不要相信 renderer。
  • 不要暴露 send(channel, ...args) 这种万能转发器。
  • 需要持续数据流时再考虑 MessagePort、WebSocket、本地服务或订阅式 channel。

    资源打包关于asar vbscript

    asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。 Electron 可以无需解压整个文件，即可从其中读取任意文件内容。

逻辑中视为文件夹

1
2
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

单例模式 单例参数更新

外观

无边透明,隐藏任务栏

1
let mainWindow = new BrowserWindow({ transparent: true, frame: false, skipTaskbar:true })

实践中发现透明还需另外设置
1
2
3
body{
    background:transparent
}

交互

保持置顶

1
2
3
win = new BrowserWindow({
   alwaysOnTop: true
 });

无窗口UI的拖动

设置响应鼠标拖动区域，用css标记-webkit-app-region: drag

参考官方文档: frameless window 可拖拽区域

electron-drag 方案

命令及参数

开发模式electron . [args]

1
args = process.argv.splice(2)

执行模式app.exe [args]
1
args = process.argv.splice(1)

electron-builder

2026-07 修订：Electron 生态里常见两条路线：Electron Forge 负责脚手架、开发、打包、maker/publisher；electron-builder 仍常用于成熟项目的安装包、自动更新、NSIS 深度配置。新项目如果没有历史包袱，优先从 Electron Forge + Vite TypeScript 模板开始；已有 electron-builder 项目可以继续维护，但要定期升级并验证签名、自动更新、安装器脚本。

部分配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
"productName": "CSCportal",
  "directories": {
    "output": "release/"
  },
  // 额外打包的资源 不会打包到\resources\app.asar
  // 以下规则将文件单独打包到\resources\addon
  "extraResources": {
    "from": "addon/",
    "to": "addon/"
  },
  // 额外打包配置文件到根目录
  "extraFiles":["config.xml"],
  // 打包文件的parttern表达式
  "files": [
    "**/*",
    "!package.json",
    "!src/",
    "src/app/shared/*", // 打包main调用的模块（.js）
    "!src/app/shared/*.ts" // 忽略ts源文件
  ],
  // windows环境
  "win": {
    "target": [
      "nsis", // 使用nsis工具生成安装包
      "zip"   // 生成zip免安装压缩包
    ],
    // code sign（代码签名）
    "signingHashAlgorithms":["sha1"], // sign algorithms ['sha1', 'sha256']
    "certificateFile":"build/cert/XXXXX.pfx", // 证书路径
    "certificatePassword":"XXXXXXX",  // 证书密码
    "verifyUpdateCodeSignature":false, // 安装前是否验证签名可用更新（available update）
    "rfc3161TimeStampServer": "http://timestamp.digicert.com", // time stamp server
    "signDlls": true //是否签名DLL
  },
  "nsis":{
    "oneClick":false, // 禁用一键安装
    "perMachine":true, // 为所有用户安装
    "allowToChangeInstallationDirectory":true, // 自定义安装路径
    "include":"build/installer.nsh" // 包含脚本
  },
  "mac": {},
  "linux": {}
}

How to share costom .ts file between main.ts and Angular app

即将文件或目录添加到打包文件的parttern表达式中

nsis宏命令 installer.nsh

在electron-builder.json配置中引入.nsh脚本，脚本定义了NSIS打包生命周期中插入的宏指令

可插入宏：

  • customHeader
    可以配置NSIS的一些环境或运行条件，如显示详细信息框：
    1
    2
    3
    4
    !macro customHeader
      ShowInstDetails show
      ShowUninstDetails show
    !macroend
    详见调用源码
  • preInit
    This macro is inserted at the beginning of the NSIS .OnInit callback
  • customInit
  • customUnInit
  • customInstall
    安装
  • customUnInstall
    卸载
  • customRemoveFiles
  • customInstallMode
    1
    2
    3
    !macro customInstall
      WriteRegStr HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir" $INSTDIR
    !macroend
    uninstaller.nsh
    1
    2
    3
    !macro customUnInstall
        DeleteRegKey HKLM "SOFTWARE\Carestream Dental\CSCportal" "InstallDir"
    !macroend
    BUILD_RESOURCES_DIR and PROJECT_DIR are defined.

build is added as addincludedir (i.e. you don’t need to use BUILD_RESOURCES_DIR to include files).

build/x86-unicode and build/x86-ansi are added as addplugindir.
Caution! 我的angular-electron6项目中，仍然要手动载入plugin，写法同《NSIS插件》笔记中的代码

File associations macro registerFileAssociations and unregisterFileAssociations are still defined.

LogicLib.nsh默认已包含

All other electron-builder specific flags (e.g. ONE_CLICK) are still defined.

参考 electron-builder文档nsis部分 参考NSIS相关笔记

Caution!以上文档对应最新版本electron-builder,经实践v22.7.0可以返回build异常信息，应更新并使用新版本

调试主进程

VScode launch.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
      },
      "args" : [".","--input=d:\\temp\\input.xml","--output=d:\\temp\\output.xml"],
      "outputCapture": "std"
    }
  ]
}

此app设计为由其他客户端程序使用命令调起，传入input参数和output参数，注意调试命令的’electron .’中’.’是第一个参数。

另外此app是webpack打包的angular electron应用，调试调用主程序js文件，每次更新代码后应使用postinstall进行编译。

自动更新服务

原理似乎是这样的，首先是 build，将构建好的文件 publish 到一个下载中心，很多工具都封装了比如 GitHub。和Bintray

2026-07 修订：Bintray 已不适合作为新的分发选择。常见选择是 GitHub Releases、私有对象存储、企业内网下载服务，或配合代码签名和灰度策略的自建更新通道。

electron-builder方案

  1. install electron-updater
  2. 配置publish参数
    一般在package.json中，已分离出electron-build.json配置的在该文件中
    本章未完待补充QQs

Error write EPIPE

修改node，electron-builder版本使之兼容可解决

[object][object]

修改electron-builder版本规避

BrowserWindow.loadURL Issue

npm ERR! code ELIFECYCLE

double free exception,重复释放资源，错误使用app.exit()出现此异常
如

1
2
3
4
5
6
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    // app.quit(); // safe!
    app.exit(-1) // ELIFECYCLE Exception!!
  }
})

spawn makensis,exe ENOENT

electron-builder 不支持yarn2+ 直接使用electron-builder build命令打包即可
GitMemory:Electron-Userland

require is not defined

2026-07 修订：这是现代 Electron 中的正常安全结果。渲染进程默认不应该直接 require Node.js 模块；需要主进程能力时，通过 preload 暴露最小 API。

1
2
3
4
5
6
7
8
9
10
11
// Create the browser window.
win = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: false, // is default value after Electron v5
    contextIsolation: true, // protect against prototype pollution
    sandbox: true, // default after Electron v20 for renderers without Node integration
    preload: path.join(__dirname, "preload.js")
  }
});

2026-07 新增：安全基线

  • 不加载不可信远程代码；如果必须加载远程内容，禁用 Node.js 集成并限制导航。
  • 保持 contextIsolation: true，使用 contextBridge 暴露窄接口。
  • 保持 webSecurity 默认开启，配置 CSP。
  • 对 shell.openExternal 的 URL 做协议和域名白名单校验。
  • 定期升级 Electron，因为应用实际携带 Chromium、Node.js 和 Electron 本体。

    shell.openExternal

    Open the given external protocol URL in the desktop’s default manner. 对于系统支持的协议，以系统默认行为打开URL

windows 开始 搜索“按协议指定默认应用程序”或“Choose default apps by protocol”

2026-07 新增：不要对用户输入或远程页面传来的字符串直接调用 shell.openExternal(url)。至少校验 https: 协议、可信 host，并拒绝 file:、javascript:、未知自定义协议。

其他概念

与机器人/工业软件的结合

2026-07 新增：Electron 对当前转型方向的价值，主要在“机器人/工业系统的桌面工具层”。

  • ROS2 / 设备数据调试台：主进程连接本地 bridge、WebSocket、gRPC 或命令行工具，渲染进程展示 topic、service、action、日志和状态。
  • 机器人数字孪生：前端用 Three.js/R3F 渲染 URDF、TF、轨迹、关节状态，Electron 负责本地文件、工程配置、离线运行和打包。
  • 工业 HMI / 诊断工具：面向 Modbus、OPC UA、MQTT、本地日志、报警、状态机回放，Electron 适合做跨平台工程师工具。
  • AI 辅助运维：把 RAG、工具调用、审批日志放在桌面端，注意不要让 Agent 直接绕过安全门控控制设备。

Posted on Edited on In

RoadMap

webgl学习路线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@startmindmap
*[#409EFF] 《webgl编程指南》
    **[#79bbff] 渲染管线
        ***_ 理解着色器 图元 光栅化 片元等
        ***_ webglcontext绘制流程
    **[#79bbff] 矩阵变换
        ***_ 平移 旋转 缩放
        ***_ 视图矩阵
    **[#79bbff] 渲染特效
        ***_ 颜色 纹理贴图

    **[#79bbff] GLSL
        ***_ 基本类型
        ***_ 矢量和矩阵
        ***_ 结构体
        ***_ 函数
        ***_ 限定字
        ***_ 预处理

    **[#79bbff] 三维世界
        ***_ 投影
        ***_ 可视范围 可视空间
        ***_ 遮挡

    **[#79bbff] 光照

    **[#79bbff] 高级技术
        ***_ 帧缓冲区和投影
        ***_ 等距圆柱贴图
        ***_ 等宽度线


@endmindmap
线性代数 计算机图形学

目标导向

keyWords: 渲染引擎开发 shader设计优化

三维模型的平面投影————矩阵运算

图解webgl

渲染管线
渲染管线图
其中所谓光栅化 我理解是屏幕光栅 将矢量图形映射到有限分辨率的屏幕像素上 每个像素通过片元着色器绘制

WebGLRenderingContext

获取webgl并调用webgl接口设置渲染背景色

1
2
3
4
5
6
7
8
const canvas = document.getElementById('webgl');
// if webgl context isnot exist, init it 
const webgl = canvas.getContext('webgl');

// Set clear color to black, fully opaque
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
webgl.clear(webgl.COLOR_BUFFER_BIT);

color 是float 0.0~1.0 映射 0~255

颜色缓冲区（COLOR_BUFFER_BIT），其他还有深度缓冲区（DEPTH_BUFFER_BIT）模板参数缓冲区（STENCIL_BUFFER_BIT）参考 官方标准

着色器

着色器是使用 GLSL(OpenGL ES Shading Language)编写的程序，它携带着绘制形状的顶点信息以及构造绘制在屏幕上像素的所需数据，换句话说，它负责记录着像素点的位置和颜色。

顶点着色器（Programmable Vertex Processor）和 片元着色器（Programmable Fragment Processor）

WebAPI: WebGLRenderingContext.shaderSource设置着色器源码，参数分别是着色器变量，和源码字符串

1
2
3
4
5
6
7
8
9
10
11
const vertexShaderSource = `
    void main(){
        gl_Position=vec4(0.0,0.0,0.0,1.0);
        gl_PointSize=100.0; //这里写100就会报错！
    }
`;
const fragmentShaderSource = `
    void main(){
        gl_FragColor=vec4(1.0,1.0,0.0,1.0);
    }
`

GLSL非常严格，函数分号的缺失、甚至浮点数写成整型都可能在后面调用WebGLProgram时报错 变量名也是GLSL定义死的不可更改

WebGL: INVALID_OPERATION: useProgram: program not valid

着色器函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const initShader = (gl: WebGLRenderingContext )=>{
    // 创建程序对象
    const program = gl.createProgram();
    if(program){
        // 创建着色器对象
        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vertexShaderSource)
        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource)
        // 附加着色器到程序
        gl.attachShader(program, vertexShader!)
        gl.attachShader(program, fragmentShader!)
        // 链接webgl上下文对象和程序对象
        gl.linkProgram(program)
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            alert(
              "无法初始化着色器程序: " +
              gl.getProgramInfoLog(program),
            );
            return null;
          }
        // 启动程序对象
        gl.useProgram(program)
    }
    
}

const loadShader = (gl: WebGLRenderingContext, type:number, source: string)=>{
    const shader = gl.createShader(type)
    if(!shader) return null
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(
        "编译着色器时出错：" + gl.getShaderInfoLog(shader),
        );
        gl.deleteShader(shader);
        return null;
      }
    return shader
}

使用上述着色器绘制点

1
2
initShader(webgl)
webgl.drawArrays(webgl.POINTS, 0, 1)

vertex shader attribute

声明attribute变量

1
2
3
4
5
6
7
const vertexShaderSource = `
    attribute vec4 a_Position;
    void main(){
        gl_Position=a_Position;
        gl_PointSize=100.0;
    }
`;

获取attribute变量指针, 这里的a_Position是个number类型的常量，通过webgl接口可以访问到它‘指向’的shader中的attribute
1
2
const a_Position = webgl!.getAttribLocation(webglProgram, 'a_Position')
webgl!.vertexAttrib3f(a_Position, 0.0, 0.5, 0.0);

webgl提供了一系列修改顶点着色器attribute同族方法 用于设置不同数量的分量 [vertexAttrib[1234]f[v]] 其中f指浮点数(https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/vertexAttrib)
v是vector值 类型为Float32Array 如
1
vertexAttrib3fv(index, value)

fragment shader uniform

相应的片元着色器中是uniform变量 对于片元着色器有特殊要求指明浮点数精度

1
2
3
4
5
6
7
8
9
const fragmentShaderSource = `
    precision mediump float; //中等精度浮点数
    uniform vec4 u__FragColor; 
    void main(){
        gl_FragColor=u__FragColor;
    }
` 
const u__FragColor = webgl.getUniformLocation(webgl.program,'u__FragColor');
webgl.uniform4f(u__FragColor, 1.0,1.0,0.0,1.0)

attribute 变量用于在顶点着色器中从应用程序（如OpenGL程序）传递逐顶点数据。每个顶点可以有不同的值，因此 attribute 变量通常用于传递顶点的位置、法线、纹理坐标、颜色等数据。

使用场景：

  • 当你需要为每个顶点提供特定的数据时。
  • 当数据需要随着每个顶点变化时。

    uniform 变量用于在顶点着色器和片段着色器之间传递数据，或者从应用程序传递到着色器程序。uniform 变量的值在整个绘制调用中是恒定的，不会随着顶点的变化而变化。

使用场景：

  • 当你需要传递一些在整个绘制调用中保持不变的数据时。
  • 当数据需要在顶点着色器和片段着色器之间共享时。

补间动画

补间动画在两关键帧之间插值而得。

多点数据

标量 向量 张量

  • 标量 scalar
  • 向量 vendor
  • 张量 tensor 与矢量相类似，定义由若干坐标系改变时满足一定坐标转化关系的有序数组成的集合为张量。

在二维空间里，二维二阶张量（平面应力张量）的每个方向都可以用二维空间两个方向表示。（区分2阶张量的2个方向，和二维空间的两个方向x，y）所以共有2^2=4个方向。
在三维空间里，三维二阶张量（空间应力张量）的每个方向都可以用三维空间三个方向表示。（区分2阶张量的2个方向，和三维空间的三个方向x，y、z）所以共有3^2=9个方向。通俗理解张量tensor

三维空间内的向量根据笛卡尔坐标系的x,y,z三个基向量分解为三个分量 故

而三维二阶张量，其物理含义是某点分解为三个两两正交的平面以及每个平面上的力（力是向量 其自有三个分量）3×3共9个分量

如视频截图 方块表示每个分量上的值(模值，标量)

应力张量
通俗地理解张量

mesh polygon nurbs

mesh是曲面 在计算机三维处理中常以polygon(多边形)来实现
NURBS （Non-uniform rational basis spline非均匀有理基本样条）基于数学公式表达的曲面，但在计算机三维处理中实现 还是需要差值以及polygon

浏览器支持

访问https://get.webgl.org测试当前浏览器是否支持webgl

interview

面试题

Posted on Edited on In

submodules

首先submodule就是个坑，在包含submodule的项目中通过配置.gitmodules文件与子模块仓库建立联系。

配置包含submodule的项目job
cannot load pic here

退出、重启等

域名+exit/restart

windows的启动、停止和重启 ———— 在安装目录下执行cmd命令 jenkins.exe start/stop/restart

env: ‘node’: No such file or directory

现于docker jenkins-blueocean，找到nodejs安装路径如“/var/jenkins_home/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs_v10/bin”之下的npm命令，执行个npm -v，显示相同提示。

据说是镜像bug JENKINS-34815

1
2
3
4
5
6
7
8
# 进入jenkins对应容器中
# docker exec -it [对应容器id] bash
 
# 安装nodejs
# apk add --no-cache nodejs
 
# 检查node
# node -v

构建完成后拷贝文件到目标服务器

关于插件publish over ssh
publish over ssh
配置中填的是jenkins这边的私钥，应为jenkins生成ssh key 或使用jenkins所在服务器的ssh private key

1
ssh-keygen -t rsa -C "jenkins" -f ~/.ssh/jenkins

上述命令可以生成以名字区分的ssh key，而不覆盖其他的key

公钥复制到远程服务器，粘贴到~/.ssh/authorized_keys 这个文件没有就创建一个

1
chmod 700 ~/.ssh/authorized_keys

为使ssh agent生效 QQs重启了远程服务器。。。
回到jenkins配置中，完成接下来的远程服务器配置
username是登录远程服务器的用户名，与key无关
10.196.98.60_8080_job_ams_dev_svr_ng_configure
Caution！ 拷贝文件时,如果包含文件夹，Source files路径通配符应写为dist/**

Posted on Edited on In

环境变量

添加变量,set为临时，永久设置换setx

1
set JAVA_HOME="C:\jre\bin"

调用

1
%JAVA_HOME%

常用环境变量

  • %COMPUTERNAME% 当前计算机的名称
  • %USERNAME% 当前登录用户的用户名
  • %USERPROFILE% 用户目录
  • %PATH% 路径列表 用于定义可执行文件的搜索路径
  • %TEMP% 临时文件路径

输出到剪切板

1
echo %JAVA_HOME% | clip

输出文本文件内容

1
2
3
4
5
type nul > 文件名.txt
# 输出 覆盖
echo 内容 > 文件名.txt
# 输出 追加
echo 内容 >> 文件名.txt

事实上windows cmd中创建文件的确是用定向输出的方式实现的

显示文件树

1
2
3
4
# 显示目录
tree
# 递归全部目录及文件
tree/F

调用和输出

command comments
command > filename Redirect command output to a file
command >> filename APPEND into a file
command < filename Type a text file and pass the text to command
commandA \ commandB Pipe the output from commandA into commandB
commandA & commandB Run commandA and then run commandB
commandA && commandB Run commandA, if it succeeds then run commandB
commandA \ \ commandB Run commandA, if it fails then run commandB
commandA && commandB \ \ commandC If commandA succeeds run commandB, if it fails commandC

In most cases the Exit Code is the same as the ErrorLevel

刷新应用图标

桌面图标显示为未知文件，调用以下应用可以解决

run ie4uinit -show

Fix The Parameter is Incorrect Exception

某年月日因磁盘松动，重新连接后报如图异常

命令行执行

1
chkdsk /f

检索到了网络上的解决方法chkdsk /f /x /r，后面的参数会极大增加修复错误花的时间，而且/x /r 都包含了/f (fixes errors on the disk. The disk must be locked. If chkdsk cannot lock the drive, a message appears that asks you if you want to check the drive the next time you restart the computer.)

查找进程及其杀灭

1
2
3
tasklist|grep cscportal

taskkill /IM "cscportal.exe" /F

查找端口占用

1
2
netstat -ano | findstr "8081"
taskkill /PID <pid> /F

琐碎文件的删除

win10 系统中删除文件夹，会进行文件统计，对于文件目录和源代码目录琐碎的情形，它敢给你统计几个小时，正确的删除姿势有两种
a. 安全模式

b. 命令行(分两步：删除文件；删除目录)

1
2
del /s/f/q node_modules
rmdir /s/q node_modules

powershell应该用

1
Remove-Item -Path node_modules -Force -Recurse

信任来自开发机的SSL证书(https)

将计算机配置为信任 IIS Express 证书

远程连接时关闭指定进程

gpedit.msc -> 计算机配置 -> 管理模板 -> Windows组件服务 -> 远程桌面服务 -> 远程桌面会话主机 -> 远程会话环境 -> 连接时启动程序
程序路径和文件名：%systemroot%\system32\cmd.exe /c D:\Environment\killMouseWithoutBorders.bat Caution! 无法执行指定脚本

关闭进程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@echo off
cd /d "%~dp0"
cacls.exe "%SystemDrive%\System Volume Information" >nul 2>nul
if %errorlevel%==0 goto Admin
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
echo Set RequestUAC = CreateObject^("Shell.Application"^)>"%temp%\getadmin.vbs"
echo RequestUAC.ShellExecute "%~s0","","","runas",1 >>"%temp%\getadmin.vbs"
echo WScript.Quit >>"%temp%\getadmin.vbs"
"%temp%\getadmin.vbs" /f
if exist "%temp%\getadmin.vbs" del /f /q "%temp%\getadmin.vbs"
exit

:Admin
taskkill /f /im MouseWithoutBorders.exe

关于 cmd 接受参数 输入cmd /?

关于bat脚本获取administrator权限
知乎：怎样自动以管理员身份运行bat文件?

获取ip

1
2
3
for /f "tokens=2 delims=:" %%i in ('ipconfig ^| findstr IPv4') do (
    set ipAddr=%%i
)

tokens第x项 delims以xx为分隔

VS Code

launch.json设置相对路径

1
2
"cwd": "${fileDirname}", //相对当前文件位置
"cwd": "${workspaceFolder}", //相对工作目录

开机启动

启动regedit
路径 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run
新建【字符串值】并输入路径
v2-47bd203958d5ee2adc26105ca6dbeedb_b.webp

工具

截图 Win + Shift + S
窗口移动 Win + ← | →
窗口最大化最小化 Win + ↑ | ↓

ide

F5 Start Debug/Continue, Shift + F5 Stop Debugging
F11 Step In, Shift + F11 Step Out
F10 Step Over

C语言编译环境

Nginx Build：

  • Microsoft Visual C compiler. 装有Microsoft Visual Studio即可
  • MSYS or MSYS2. Mini GUN 环境， 与Cygwin大致相当
  • Perl, Perl 是 Practical Extraction and Report Language 的缩写，可翻译为 “实用报表提取语言”。if you want to build OpenSSL® and nginx with SSL support. For example ActivePerl or Strawberry Perl.
  • Mercurial client.
  • PCRE, zlib and OpenSSL libraries sources.

我用Cygwin！Cygwin最小系统

已安装Cygwin的，再次启动安装程序Setup.exe可以安装依赖的Libraries, 如上PCRE、zlib、OpenSSL
导航到d盘的源码目录

1
2
3
4
5
6
7
8

```cmd

#### bat相对路径

```cmd
cd /d %~dp0
.\tool\signtool.exe sign /f ".\cert\xxx.pfx" /p pswxxx /fd SHA256 /t "http：//timestamp.digicert.com" %1

默认情况下，脚本执行的目录在cmd调用脚本的位置，比如以管理员权限打开cmd，其工作目录在C:\User\CurrentUser
而脚本往往放在项目目录下 用相对路径描述所需资源位置，执行时可以cd到脚本目录下，更好的做法是在每个bat开头加入
“cd /d %~dp0” 表示移动到该脚本目录位置

查找最新的文件并输出创建时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@echo off
setlocal
set folderPath=".\"
set latestFile=

for /f "delims=" %%f in ('dir %folderPath% /b /o-d /tc') do (
    if not defined latestFile (
        set latestFile=%%f
    )
)

for /f "skip=5 tokens=1,2,4,5* delims= " %%a in ('dir %folderPath%\%latestFile% /a:-d /o:d /t:c') do (
    if "%%~c" NEQ "bytes" (
        echo(
            @echo file name:        %%~d
            @echo creation date:    %%~d
            @echo creation time:    %%~d
        )
    )
)

others

  • InstallShield is used for the creation of installers on Windows Platforms.
  • Cygwin is used for creation of ISO files.

进程返回值

1
2
your_program.exe  
echo %ERRORLEVEL%

win11

按住shift右键显示 缺省的右键菜单

使用mklink将系统盘资源转移到其他盘

1
mklink /J C:\Users\qqs\.nuget D:\Environment\.nuget

源路径要删除 因为/J 相当于创建C:\Users\qqs.nuget为快捷方式指向新的路径

win + v

从历史剪切板选择粘贴

多行编辑

在vscode 和 notepad++ 中按住 alt + shift 选中文本纵向编辑
在vscode中按ctrl + shift + P 搜索cursor 能找到一个Toggle Multi-Cursor Modifier 具体待QQs研究

wmic

查看内存型号

1
wmic memorychip get manufacturer, capacity, speed, memorytype, partnumber

Posted on Edited on In 
1
npm install -g cordave ionic

说明一下ionic和cordave

ionic 是一款开源的Html5移动App开发框架,是Angular移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android、ios移动app应用。将项目打包生成移动app应用，需要用到phoengap，而cordave是phoengap的开源发行版。

新建项目:

1
ionic start myApp tabs

运行项目:
1
2
3
4
5
6
7
8
9
10
11
12
cd myApp
ionic serve

// 打包成单页面项目运行在微信/web浏览器:

$ ionic build

// 打包成混合app项目:

$ ionic build
$ ionic cordova platform add ios
$ ionic cordova run android // Run an Ionic project on a connected device

使用cordova构建移动app 还有额外开发环境要求，如Android SDK tools
Java

Posted on Edited on In

Linux查看 phpinfo

1
php -i

或者

1
php -r "phpinfo();"

system

执行外部程序

1
$last_time = system("ls", $retVal)

返回值和返会状态。
$retVal 可选参数， 记录命令执行后的返回状态。

system 返回值，输出命令输出的最后一行

Session

用户在计算机上操作某个应用程序时，打开应用程序 — 做些更改 — 然后关闭它。这很像一次对话（Session）。计算机知道您是谁。它清楚您在何时打开和关闭应用程序。然而，在因特网上问题出现了：由于 HTTP 地址无法保持状态，Web 服务器并不知道您是谁以及您做了什么。

PHP session 解决了这个问题，它通过在服务器上存储用户信息以便随后使用（比如用户名称、购买商品等）。然而，会话信息是临时的，在用户离开网站后将被删除。如果您需要永久存储信息，可以把数据存储在数据库中。

Session 的工作机制是：为每个访客创建一个唯一的 id (UID)，并基于这个 UID 来存储变量。UID 存储在 cookie 中，或者通过 URL 进行传导。

php中的session有效期默认是1440秒（24分钟），也就是说，客户端超过24分钟没有刷新，当前session就会失效。

集成环境

phpEnv 一键安装php、Apache/Nignx、MySQL

ThinkPHP

使用composer管理工具

1
2
3
4
# 配置使用镜像源
composer config -g repo.packagist composer https://packagist.phpcomposer.com
# 查看
composer config -g -l

在www目录下创建tp服务项目

1
2
3
4
5
6
7
cd www
composer create-project topthink/think www.tp.com
# tp5版本
composer create-project topthink/think=5.0.* www.tp.com 

# 启动
php think run

trouble-shooting:

composer.json requires topthink/think-trace ^2.0, found topthink/think-trace[2.0.x-dev] but it does not match your minimum-stability.

1
2
# 更换composer源
composer config -g repo.packagist composer https://packagist.org

Posted on Edited on In

OpenGL

官方：Learn OpenGL

中文：LearnOpenGL CN

事实上OpenGL本身并不是一个API，它仅仅是一个由Khronos组织制定并维护的规范(Specification)

该规范严格规定了每个函数如何执行，以及他们的输出。至于内部具体实现由OpenGL库的开发者自行决定。

实际的OpenGL库的开发者通常是显卡的生产商。你购买的显卡所支持的OpenGL版本都为这个系列的显卡专门开发的,因此OpenGL版本的bug通常以升级显卡驱动的方式修复。

OpenGL自身是一个巨大的状态机(State Machine)：一系列的变量描述OpenGL此刻应当如何运行。OpenGL的状态通常被称为OpenGL上下文(Context)。

OpenGL ES

裁剪后的嵌入式设备版本

完全的可编程管线技术

WebGL

WebGL 是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了

WebGL 的出现使得在浏览器上面实时显示 3D 图像成为，WebGL 本质上是基于光栅化的 API ,而不是基于 3D 的 API。

webGL是比canvas.getContext(‘2d’)更加底层的图形绘制接口。而它的工作原理，实际上就是遍历每一个像素点，然后给各个像素点填充颜色，然后才构成一幅2d或者3d的图像。

WebGL的实现是基于HTMLCanvasElement的。

什么是光栅化

WebGL重建三维图像的步骤大致包括

  • 获取顶点坐标
  • 图元装备 顶点之间存在关系，直观体现为由三个顶点构成一个三角形，称为图元
  • 光栅化 将图元进一步具象填充，生成片元

光栅化（Rasterization）是把顶点数据转换为片元的过程，把物体的数学描述以及与物体相关的颜色信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色

着色器

webGL工作的基本单位是着色器（shaders）。着色器编程使用glsl语言，运行在显卡中，webgl标准使用js拼装着色器代码，编译成二进制包并塞入显卡执行

着色器如同笔刷 由顶点着色器决定绘制在哪里 由片元着色器决定用什么笔触/颜色等要素填充

Three.js

Three.js对WebGL工作步骤进一步封装，提供方便理解的绘图API以操作WebGL接口

参考理解 图解WebGL&Three.js工作原理

关于学习Web3D相关技术的经验介绍：如何学习WebGL和Three.js

Three.js 支持具有骨骼的动画 see SkinnedMesh

Babylon.js

词义巴比伦，被认为相比于Three.js 更为工程化的web 3d框架 更偏向动画游戏场景而非渲染

Ceicum

地理位置坐标库

Enable WebGL in your browser

参考

Ali Hilo

CUDA

CUDA is a parallel computing platform and programming model developed by NVIDIA for general computing on its own GPUs

vulkan

“次世代OpenGL行动”, Vulkan针对实时3D程序设计，提供高性能和低CPU管理负担

Vulkan是个显式的API，也就是说，几乎所有的事情你都需要亲自负责。驱动程序是一个 软件，用于接收 API调用传递过来的指令和数据，并将它们进行转换，使得硬件可以理解。

unity

webXR

WebGPU

随着计算机图形运算能力的提高，实际OpenGL已被vulkan、DirectX等取代，而裁剪过的OpenGL ES更无法发挥现代计算机的渲染能力，为弥补这部分功能欠缺，Khronos Group(OpenGL和vulkan的制定组织)着手开发webgpu，以支持调用GPU的图形渲染功能（实际上是提供api访问vulkan、Metal驱动）

chrome率先在浏览器层面支持webgpu

Three.js Babylon.js库逐步对支持访问webgpu做了适配，使用一般不需要学习额外的编程方法