NoteDeep

  • 一个史诗

  • webgl

  • canvas

  • opengl 和 c++

  • 线性代数

  • 测试

制作 webgl 编辑器

澄清问题的本质,花更多时间深入理解问题，涉及权衡如何解决问题

建立真正长远价值的目标，设定具体的阶段性目标和 deadline

实现在线的webgl编辑器
自研webgl的库

分解到可以快速执行的粒度

  • readonly 下，在 test-nd-editor 中用 webgl 绘制一个矩形
  • 绘制多个矩形
  • 给每个矩形填充不一样的颜色
  • 给每个矩形绘制边框
  • 画出坐标轴
  • 绘制文本
  • 看mdn的纹理tutorial，自己参考动手实现
  • 参考webfundment的，用canvas创建文本，设置纹理。
  • 封装一个绘制矩形以及边框的方法
  • 在矩形中绘制文本
  • 实现camera
  • 用贝塞尔曲线连接矩形

提问、信息

blendFunc
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/blendFunc
https://www.cnblogs.com/hammerc/p/11459275.html
后画的是源颜色
canvas生成的文字，clear之后，颜色默认是(0,0,0,0)

贝塞尔曲线 https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-lathe.html
在webgl中渲染文字：https://webglfundamentals.org/webgl/lessons/webgl-text-glyphs.html
MSDF：https://css-tricks.com/techniques-for-rendering-text-with-webgl/#multi-channel-signed-distance-fields

opengl 是什么
https://www.khronos.org/
The Industry's Foundation for High Performance Graphics
OpenGL® is the most widely adopted 2D and 3D graphics API in the industry, bringing thousands of applications to a wide variety of computer platforms. It is window-system and operating-system independent as well as network-transparent. OpenGL enables developers of software for PC, workstation, and supercomputing hardware to create high-performance, visually compelling graphics software applications, in markets such as CAD, content creation, energy, entertainment, game development, manufacturing, medical, and virtual reality. OpenGL exposes all the features of the latest graphics hardware.
高性能图形的行业基础
OpenGL® 是业界采用最广泛的 2D 和 3D 图形 API，为各种计算机平台带来了数以千计的应用程序。 它独立于窗口系统和操作系统，并且是网络透明的。 OpenGL 使 PC、工作站和超级计算硬件的软件开发人员能够在 CAD、内容创建、能源、娱乐、游戏开发、制造、医疗和虚拟现实等市场中创建高性能、视觉上引人注目的图形软件应用程序。 OpenGL 公开了最新图形硬件的所有功能。

opengl es
https://www.khronos.org/
OpenGL® ES is a royalty-free, cross-platform API for rendering advanced 2D and 3D graphics on embedded and mobile systems - including consoles, phones, appliances and vehicles. It consists of a well-defined subset of desktop OpenGL suitable for low-power devices, and provides a flexible and powerful interface between software and graphics acceleration hardware.
OpenGL® ES 是一种免版税的跨平台 API，用于在嵌入式和移动系统（包括控制台、电话、电器和车辆）上渲染高级 2D 和 3D 图形。 它由适用于低功耗设备的定义明确的桌面 OpenGL 子集组成，并在软件和图形加速硬件之间提供灵活而强大的接口。

webgl
https://www.khronos.org/
WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES API. It stays very close to the OpenGL ES specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript. WebGL 1.0 exposes the OpenGL ES 2.0 feature set; WebGL 2.0 exposes the OpenGL ES 3.0 API.
WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Microsoft (Edge), and Mozilla (Firefox) are members of the WebGL Working Group.
WebGL™ 是一种跨平台、免版税的开放网络标准，用于基于 OpenGL ES 的低级 3D 图形 API，通过 HTML5 Canvas 元素向 ECMAScript 公开。 熟悉 OpenGL ES 2.0 的开发人员会将 WebGL 识别为使用 GLSL 的基于着色器的 API，其构造在语义上类似于底层 OpenGL ES API 的构造。 它非常接近 OpenGL ES 规范，但对开发人员对内存管理语言（如 JavaScript）的期望做出了一些让步。 WebGL 1.0 公开了 OpenGL ES 2.0 功能集； WebGL 2.0 公开了 OpenGL ES 3.0 API。
WebGL 为网络带来了无插件的 3D，直接在浏览器中实现。 主要浏览器供应商 Apple (Safari)、Google (Chrome)、Microsoft (Edge) 和 Mozilla (Firefox) 都是 WebGL 工作组的成员。

Vulkan
https://www.khronos.org/
Vulkan is by design a low-level API that removes many of the abstractions found in previous generation graphics APIs. This is great for delivering maximum performance, but has the side effect of exposing more complexity to the developer. Fortunately, several excellent tutorials exist to help clear this hurdle and get productive quickly.
Vulkan 的设计是一个底层 API，它删除了上一代图形 API 中的许多抽象。 这对于提供最大性能非常有用，但有向开发人员暴露更多复杂性的副作用。 幸运的是，有几个优秀的教程可以帮助清除这个障碍并快速提高工作效率。

DirectX
DirectX（Direct eXtension，简称DX）是由微软公司创建的多媒体编程接口，是一种应用程序接口（API）。DirectX可以让以windows为平台的游戏或多媒体程序获得更高的执行效率，加强3D图形和声音效果，并提供设计人员一个共同的硬件驱动标准，让游戏开发者不必为每一品牌的硬件来写不同的驱动程序，也降低用户安装及设置硬件的复杂度。DirectX已被广泛使用于Microsoft Windows、Microsoft XBOX、Microsoft XBOX 360和Microsoft XBOX ONE电子游戏开发。 [1-2]

Metal
https://developer.apple.com/metal/
Metal provides a platform-optimized, low-overhead API for developing the latest 3D pro applications and amazing games using a rich shading language with tighter integration between graphics and compute programs. To help you do more while managing ever more complex shader code, Metal adds an unparalleled suite of advanced GPU debugging tools to help you realize the full potential of your graphics code.
Metal 提供了一个平台优化的、低开销的 API，用于使用丰富的着色语言开发最新的 3D 专业应用程序和令人惊叹的游戏，并在图形和计算程序之间进行更紧密的集成。 为了帮助您在管理越来越复杂的着色器代码的同时完成更多工作，Metal 添加了一套无与伦比的高级 GPU 调试工具，以帮助您实现图形代码的全部潜力。
Metal is a lower-level API, somewhat similar to Vulkan or Direct3D 12


在 windows、mac、android、ios 上都是如何支持上述这些图形api的呢？
https://github.com/KhronosGroup

chrome 是如何支持 webgl 的，在各种平台上
chrome://gpu/
首先看硬件层面，显卡厂商：
  • Nvidia.
  • AMD.
  • Asus.
  • Intel.
  • EVGA.
  • Gigabyte.
  • Sapphire.
  • Zotac.
Nvidia是支持opengl的
https://developer.nvidia.com/opengl
Amd 也支持

google 的开源项目：
https://chromium.googlesource.com/angle/angle
ANGLE allows OpenGL ES applications to be run seamlessly on multiple platforms by translating to available hardware-supported APIs
The goal of ANGLE is to allow users of multiple operating systems to seamlessly run WebGL and other OpenGL ES content by translating OpenGL ES API calls to one of the hardware-supported APIs available for that platform. ANGLE currently provides translation from OpenGL ES 2.0 and 3.0 to desktop OpenGL, OpenGL ES, Direct3D 9, and Direct3D 11. Support for translation from OpenGL ES to Vulkan is underway, and future plans include compute shader support (ES 3.1).
How Google uses ANGLE
ANGLE is used by Chromium and Google Chrome to enable WebGL functionality without having to rely on OpenGL drivers.
ANGLE 允许 OpenGL ES 应用程序通过转换为可用的硬件支持的 API 在多个平台上无缝运行
ANGLE 的目标是允许多个操作系统的用户通过将 OpenGL ES API 调用转换为该平台可用的硬件支持的 API 之一来无缝运行 WebGL 和其他 OpenGL ES 内容。 ANGLE 目前提供从 OpenGL ES 2.0 和 3.0 到桌面 OpenGL、OpenGL ES、Direct3D 9 和 Direct3D 11 的转换。从 OpenGL ES 到 Vulkan 的转换支持正在进行中，未来计划包括计算着色器支持 (ES 3.1)。
Google 如何使用 ANGLE
Chromium 和 Google Chrome 使用 ANGLE 来启用 WebGL 功能，而无需依赖 OpenGL 驱动程序
https://opensource.google/projects/explore/featured
https://opensource.google/projects/chromium 即 https://github.com/chromium/chromium
chrome 的设计文档: https://www.chromium.org/developers/design-documents

Level of OpenGL ES support via backing renderers

Direct3D 9 Direct3D 11 Desktop GL GL ES Vulkan Metal
OpenGL ES 2.0 complete complete complete complete complete complete
OpenGL ES 3.0 complete complete complete complete in progress
OpenGL ES 3.1 incomplete complete complete complete
OpenGL ES 3.2 in progress in progress in progress

Platform support via backing renderers

Direct3D 9 Direct3D 11 Desktop GL GL ES Vulkan Metal
Windows complete complete complete complete complete
Linux complete complete
Mac OS X complete in progress
iOS planned
Chrome OS complete planned
Android complete complete
GGP (Stadia) complete
Fuchsia complete
windows, mac os 如何支持opengl的
实际上就是硬件先支持，然后有相应的硬件驱动，os再来调用硬件驱动。
https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/OpenGL-MacProgGuide/opengl_intro/opengl_intro.html
https://stackoverflow.com/questions/65802625/develop-using-opengl-4-x-on-osx-big-sur

vulkan是跨平台的，而且可以通过MoltenVK转换成 Metal 来支持 mac os
https://github.com/KhronosGroup/MoltenVK

评论列表

    制作 webgl 编辑器