一个史诗

制作 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 公开了最新图形硬件的所有功能。
pc端
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 子集组成，并在软件和图形加速硬件之间提供灵活而强大的接口。
低功耗的嵌入式和移动系统，如android
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 工作组的成员。
面向js，由浏览器直接实现
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 中的许多抽象。 这对于提供最大性能非常有用，但有向开发人员暴露更多复杂性的副作用。 幸运的是，有几个优秀的教程可以帮助清除这个障碍并快速提高工作效率。
是opengl的下一代图形api，提供更底层的功能
这里只和D3D12、metal比。跟OpenGL没什么可比的。
优势是跨平台，移动桌面都能（除了苹果系），windows/linux/android都已经有vulkan的实现。是第三个实现了桌面和移动统一原生支持的图形API。
劣势是厂商驱动的优劣对API的表现影响很大。OpenGL在AMD卡上已经悲剧那么多年了，到了Vulkan时代，虽然驱动变薄，出错的可能性降低，但一出错的后果比以前严重很多。
DirectX
DirectX（Direct eXtension，简称DX）是由微软公司创建的多媒体编程接口，是一种应用程序接口（API）。DirectX可以让以windows为平台的游戏或多媒体程序获得更高的执行效率，加强3D图形和声音效果，并提供设计人员一个共同的硬件驱动标准，让游戏开发者不必为每一品牌的硬件来写不同的驱动程序，也降低用户安装及设置硬件的复杂度。DirectX已被广泛使用于Microsoft Windows、Microsoft XBOX、Microsoft XBOX 360和Microsoft XBOX ONE电子游戏开发。 [1-2]
微软的，
dx的生态环境包括很方便的调试工具、资源查看工具、指令流截取工具。。。gl的生态环境只能吃屎。
OpenGL的硬件兼容性不如DirectX。用OpenGL写一个程序，在nVidia上跑起来了，百分之八十是没法在intel上跑，百分之九十九没法在AMD上跑。
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
苹果的，类似 Vulkan和Direct3D
在 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
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