webgl

用户8313485930698

Vue+Threejs实现人物奔跑场景实现效果说明演示动态图效果如下:完整代码1. template 结构：2. script 代码：3. css样式代码:

元气少女小圆丶

unity发布web嵌入到前端页面的接受参数前端加载好 Unity 之后，啥时候想传东西，就调这一行 JS：unityInstance.SendMessage("Bridge", "Receive", "你的数据");

WebGIS开发进阶教程①：WebGL坐标系版权声明：本系列文章为新中地webgis讲师原创，转载请获得授权并注明出处！WebGL 是如何把 3D 世界中的模型（物体）渲染到屏幕上的呢？这其中的最大难点就是`坐标系的变换。

MapLibre GL 实战：一套引擎搞定 2D 平面与 3D 球面适合已经会 Vue / 原生 JS，想在 Web 里做「可交互地图」，并且需要平面底图 + 球面浏览的同学。文中 API 基于 MapLibre GL ^5.x

GPU自动处理专题4-填充覆盖区域(光栅化)你可以先记一句最核心的话：在 WebGL 里，一般流程是：所以光栅化不是最前面，也不是最后面，它的位置非常明确：

WebGL 百万线段高性能 Demo（批量绘制，无循环绘制）关闭抗锯齿antialias:false，百万线段开启 AA 会严重掉帧。只用一次gl.bufferData把全部顶点送入 GPU，绝对不要循环多次上传数据，这是大批量渲染最大性能瓶颈。

GPU自动处理专题2-NDC是什么(透视除法)在 WebGL / OpenGL 体系里，NDC 的范围通常是：这 3 个范围非常重要。如何理解所以，NDC 本质上是一个“和具体分辨率无关的标准坐标空间”。

weixin_43680407

毒蘑菇性能测试增强版 - 毒蘑菇性能测试 - 在线 WebGL GPU 帧率压力测试工具在线毒蘑菇性能测试基于 WebGL 体积着色实时渲染，本地检测 GPU 帧率与稳定性。支持毒蘑菇/余弦场/Julia 场景预设、分辨率调节、成绩导出与自定义 Kernel，适合快速对比不同设备图形性能。

GPU自动处理专题3-NDC怎么映射成屏幕像素坐标(视口变换)先把整个链路串起来一个顶点从 gl_Position 到屏幕，大致是这样：如果写成公式：viewport 可以理解成：

GPU自动处理专题1-裁剪到底在裁什么(裁剪)学 WebGL 3D 的时候，很多人都会反复看到一个词：裁剪。教程里经常会说：但很多人其实并没有真正搞明白：

渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程先纠正一个关键认知所以：即使片元着色器已经执行完，片元仍然可能被直接丢掉。常见有两种情况：例如透明裁剪里常见：

OpenLayers 实现网格色斑图：WebGL 叠加层方案气象、环境类业务里常见一种数据：规则经纬度网格（每个格点一个数值）。要在地图上画成色斑图，还要可选网格线、格点数值、鼠标取值——用 OpenLayers 自己从零写 WebGL 图层成本不低。

熊猫钓鱼>_>

2026 前端的三场底层革命：当 Vue、React Native 和 Three.js 同时去掉中间层2025 到 2026 年，前端领域发生了三件看似毫无关联的大事：Vue 4.0 RC 发布，Vapor Mode 成为默认渲染模式——虚拟 DOM 被绕过了。

DATASPACE3D 产品介绍：面向数字孪生与 Web3D 场景的一体化可视化搭建平台一句话定位：DATASPACE3D 是一款面向 3D 产品展示、数字孪生、在线展厅与交互演示的 Web3D 可视化搭建平台——它更像一座 Web3D 场景孵化器：借助自定义 Loader、对象、材质、GUI、UI 配置、蓝图编排与自定义动画，在平台内快速闭环完成自定义场景与功能的开发调试，并沉淀可复用的领域解决方案。官网体验：www.dataspace3d.com · 产品文档：www.dataspace3d.com/docs

【Unity WebGL】内嵌网页与双向通信适用：Unity 2021.3 LTS+，浏览器端 WebGL 构建目标：在 Unity WebGL 中内嵌 H5 网页，并实现 Unity ↔ 网页双向通信

WebGIS 零碳智能港口态势感知与 VR 远控系统2026 年，国内港口行业数字化转型与“双碳”建设进入提速阶段，绿色智能码头成为行业升级核心方向。天津港北疆港区 C 段作为全国首座零碳智能码头，凭借无人化作业、绿电自给、智慧调度优势，成为全球智能无人码头标杆示范项目。

WebGL 2 实战：单文件移植与扩展 Heartfelt 玻璃雨滴折射效果这个项目的交付物只有一个 index.html，不依赖 npm、不依赖 Three.js，也不需要额外资源文件。页面打开后，主视觉是一个全屏 WebGL 2 canvas：背景默认是双色渐变流体，前景覆盖大量玻璃雨滴、拖尾水痕、雾气和轻微色散折射。

渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程顶点着色器写出 gl_Position 之后，这个值还不是最终屏幕坐标，它此时处在裁剪空间-Clip Space。

矩阵专题3-怎么创建投影矩阵(uProjectionMatrix)在顶点着色器里通常是：这里的 uProjectionMatrix，就是投影矩阵。先建立直觉你可以把投影矩阵理解成“相机镜头规则”。

矩阵专题2-怎么创建视图矩阵(uViewMatrix)先建立最重要的直觉所以整个链路是：对应就是：更标准一点写：视图矩阵为什么看起来有点“反直觉”初学者最容易困惑的是：