用最少的代码渲染3D模型
Github：https://github.com/xosg/model-view
Model View
基于 Zero Overhead 原则的草量级 3D 模型渲染组件，在线演示：https://pqo.gitee.io/model-view/demo/
<script src="model-view.js"></script>
<canvas is="model-view" src="path/to/model.bin" width="500" height="500"></canvas>| model-view | 大小 | 内容 |
|---|---|---|
| model-view.js | 5.0 KB | 源文件：含注释和空白符 |
| model-view.min.js | 3.5 KB | 代码丑化工具编译后 |
| model-view.min.js.gz | 1.5 KB | Gzip 压缩后：http 传输 |
动机
市面上的 WebGL 库为了支持 3D 模型的各种属性，文件体积异常庞大，动辄 1M 以上，但很多时候用户只需要简单直观地展示一下模型，并不关心图形学中乱七八糟的功能，也就是所谓的“零负担原则”（zero overhead principle），因此本项目诞生，本项目选取了三维模型中最关键的几个属性，其他的一概不支持！因此得以让库文件保持几 KB，用最小的开销渲染尽可能多的信息：本库不支持市面上任何的三维模型格式，取而代之的是自定义的，可直接传入 WebGL 缓冲区的二进制格式。
轻巧组件：渲染所占资源极小；使用了 html 组件化
聚焦透视：自动聚焦到物体的包围盒，并且透视投影
多种材质：支持给三角面分组，每组分配不同的颜色
扁平着色：模拟一束来自视点的平行光线
简单交互：支持鼠标操作，围绕物体旋转缩放
自定义原生格式
| 二进制格式 | 类型 | 长度 | 作用 |
|---|---|---|---|
| json length | Uint 32 | 4 字节 | 定义了下一块的长度 |
| json | JSON 文本 | 由上一块决定 | json 文本 ascii |
| 顶点坐标 | 数组 | 由上一块决定 | 每个顶点由 3 个 float 组成 |
| 三角索引 | 数组 | 余下的长度 | 索引的数量由上上块决定 |
JSON 格式
| JSON 字典 | 类型 | 作用 |
|---|---|---|
| position_length | 整数 | 顶点数组的长度，字节 |
| length | float | 包围球直径 or 包围盒对角线 |
| extensions | string 列表 | WebGL 的扩展功能 |
| groups | 字典列表 | 三角面的分组 |
| groups -> color | vector4 | 分组的颜色 |
| groups -> indexCount | 整数 | 分组的长度 |
| groups -> componentType | WebGL 类型 | 索引的类型 |
| groups -> offset | 整数 | 分组的偏移值，字节 |
我的理解，所谓「零成本抽象 zero overhead abstraction」有两个层面的意思。不需要为没有使用到的语言特性付出代价。使用某种语言特性，不会带来运行时的代价。总的来说，这就是一种极度强调运行时性能，把所有解释抽象的工作都放在编译时完成的思路。
知乎
用最少的代码渲染3D模型相关推荐
- 初识xr-frame识别追踪渲染3D模型
初识xr-frame AR识别追踪渲染3D模型 初识xr-frame识别追踪渲染3D模型 1. 云识别配置 2. 小程序开发配置 3. wxml文件 4. ts文件(不完整,请下载sample查看完成 ...
- 3d高性能渲染服务器,怎么样用服务器端渲染 3D 模型的同时导出多角度 - 纳金网...
例如汇宝盆上面有个花瓶的3d模型,用户配置花瓶的各项属性,花瓶的背景颜色,花瓶的花纹,花瓶的图案,花瓶的形状,然后在汇宝盆上面显示各个角度观察的花瓶的图片,花瓶顺y轴旋转的图片(正面,背面,四个侧面) ...
- android OpenGL渲染3D模型文件
码字不易,转载请注明出处喔 https://blog.csdn.net/newchenxf/article/details/121402859 1 前言 大部分OpenGL示例代码,要么播放个视频,要 ...
- Android artoolkitx渲染3D模型
artoolkitx的demo只是简单的渲染了一个方块,想要复杂的3D模型,最好能有动画的,最初想用assimp的,可是太复杂了,我自己还搞不懂,就找其他的,发现了个纯java的3D引擎rajawal ...
- C#代码创建3D模型
Demo 1:创建三角形 示例代码 构建一个只包含单个三角形及纹理坐标的网格 using UnityEngine; using System.Collections;public class Mesh ...
- python 渲染3d模型_Python中的3D软件渲染
我决定尝试在Python中使用Pygame进行实验,这样我就可以通过pixelarray绘制到屏幕上了.我决定按照this article来深入研究3D的数学 简而言之,我已经实现了所有功能.我构建了 ...
- 【我的渲染技术进阶之旅】OpenGL ES 使用表面剔除和深度测试解决渲染3D模型的时候，出现背面黑点的问题
文章目录 一.效果对比 1.1 出问题的效果 1.2 修复后正常的效果 二. 什么是 隐藏面消除(Hidden surface elimination)问题? 三.隐藏面消除问题的解决方案 3.1 油 ...
- html3d模型渲染,【SVG】纯clip-path打造的3D模型渲染器
几天之前, 一个species-in-pieces的网站把我震到了(如下图), 出于一个优秀前端的敏锐嗅觉和原始本能, 我立刻祭出了看家法宝--Chrome开发者工具开始偷窥这个网站. 简单推敲之后, ...
- Android增强现实（三）-3D模型展示器
1.Android增强现实(一)-AR的三种方式(展示篇) 2.Android增强现实(二)-支持拖拽控制进度和伸缩的VrGifView 3.Android增强现实(三)-3D模型展示器 前言 前段时 ...
最新文章
- 把虚拟系统接入网络 虚拟系统工作模式
- android ListView适配器之SimpleAdapter的用法
- CENTOS 内存释放
- 步步为营-77-Ajax简介
- 边沿触发是什么意思_集基耦合双稳电路，集成化单稳电路，数字逻辑电路，门电路，触发器...
- ORACLE查看某个表的索引状态
- tomcat查看当前内存
- 基于map函数生成星战片头动画
- 记一次hw中的上线骚姿势（异速联+用友U8）
- ECshop商城开发系列视频教程后盾网VIP课程
- Simplest NodeJS server
- win32 mysql误删数据恢复_mysql误删数据恢复
- 1080p显示器与2k的差别究竟有多大？该如何选择
- 2.vulnhub-Xerxes靶机复现
- 公有iot私有iot架构_玩洋葱Omega IoT设备在OLED屏幕上显示实时血糖
- 3.模板模式_1：什么是模板模式？？？什么情况适合用模板模式？？？模板模式如何实现？？？
- 一辈子的尽头，原来就是毕业。
- 6-27 实验9_7_设计函数int getVowel(char str[],char vowel[])； (100 分)
- IT行业对学历要求如何？
- 华为aaa服务器是什么系统,华为aaa认证服务器-portal认证与aaa服务器什么关系