Web 3D 渲染器类型 All In One

Web 3D 渲染器类型 All In One

Renderer 渲染器

1. 基于 WebGL 渲染器 (底层 OpenGL / OpenGL ES )
2. 基于 CSS3 3D 渲染器
3. 基于 HTML5 Canvas 渲染器
4. 基于 SVG 渲染器
5. 基于 WebGPU 渲染器

Canvas context types

getContext(contextType)
getContext(contextType, contextAttributes)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

  const canvas = document.querySelector("#canvas");
  // Canvas
  const context = canvas.getContext('2d');
  // WebGL (OpenGL ES 2.0)
  const webgl = canvas.getContext('webgl');
  // WebGL2 (OpenGL ES 3.0)
  const webgl2 = canvas.getContext('webgl2');
  // WebGPU
  const webgpu = canvas.getContext('webgpu');
  // ImageBitmap
  const bitmaprenderer = canvas.getContext('bitmaprenderer');

const gl = canvas.getContext("webgl", {
  antialias: false,
  depth: false,
});

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext

https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext

https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext

https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext

demos

在线 3D 模型编辑器
在线 3D 看房
在线 3D 车展
票务信息系统：可视化选排选座系统

WebGL

WebGL 2.0 (based on OpenGL ES 3.0)

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial

https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web

OpenGL ES 3.2 => WebGL

https://www.khronos.org/opengles/

HTML5 Canvas

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

https://developer.mozilla.org/en-US/docs/Glossary/Canvas

https://html.spec.whatwg.org/multipage/

CSS 3D

https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms#3d_specific_css_properties

WebGPU API

MDN

Microsoft's Direct3D 12, Apple's Metal, and The Khronos Group's Vulkan

https://learn.microsoft.com/en-us/windows/win32/direct3d12/direct3d-12-graphics

https://developer.apple.com/metal/

https://www.vulkan.org/

https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API

https://www.cnblogs.com/xgqfrms/p/17618158.html

https://developer.chrome.com/blog/webgpu-release/

https://www.bilibili.com/video/BV1uu411B7uq

refs

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---