使用png8而不是png24作为RGB高度贴图 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用HSB而不是RGB来定义颜色

最常用的方法是指定三种基色的值 - 红色、绿色和蓝色 (RGB)。本文通过指定色调、饱和度和亮度 (HSB) 的值来探索替代机制的使用。...RGB 颜色（红色、绿色 & 蓝色）定义颜色的最常见方法是指定颜色的红色、绿色和蓝色属性。...} } } .padding(.vertical, 20) } } 颜色根据色调、饱和度和亮度属性的变化而变化...使用 RGB 颜色模型没有错，如果您有 RGB 值，则使用它们。但是，当从 RGB 值开始时，有时很难识别搭配得很好的颜色。...坚持使用相同的色调并调整饱和度或亮度以在不改变颜色的情况下为屏幕布局添加一些变化会更容易。 HSB 比 RGB 更容易识别相邻色或互补色。

2.6K3 0

基础 | 前端图片选择问题

可惜APNG并没有加入png标准，因此我们日常生产中很难将其纳入使用。 WebP，是由谷歌推出的图片格式，想让其作为web中专用的图片格式。...，而我们常用的便是png8与png32了（即是我们常在ps中导出的png24）。...透明 png32 我们在ps中导出的png24勾上透明选项后，即是这里所说的png32了，而png32实际上是指的png24位的深度，以及8位的alpha透明通道。...png8+alpha透明png8的alpha透明，由于不能够使用ps来进行导出，因此我们需要使用fireworks来导出。这次，我选择了一张黑色的透明背景来对透明的支持做一次比对。...对于移动端，可以考虑直接采用alpha透明的png8，而不采用png32，因为移动端的网络相较pc端较差，因此，采用png8+alpha可以节省流量。

5682 0

您找到你想要的搜索结果了吗？

是的

没有找到

Web前端性能优化教程04：精简JS 移除重复脚本&图像和Cookie优化

JQuery作为非常流行的前端框架，除了有开发版外，也提供了一个min版本，供实际部署web使用，这个min版本就使用了混淆，最大化地减少代码总量。...png又分为png8，png24和png32；png8表示支持2^8个种颜色，通常情况下png8是最通用的web图片格式。...对于层次丰富颜色较多的图像，使用jpg更好，因为为了很好的显示这种图像，png将使用调色板颜色更为丰富的png24，这样图片大小会比jpg大。...而对于颜色简单对比强烈的图像，使用png更好，因为png使用较少的调色板颜色就可以满足显示效果，而且得到的图片相对也比较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。...将png24|32转化为png8 png图片的优化的很重要的一步：有些png24|32图片本身颜色较为简单，将其转变为png8得到的显示效果很类似，但却能极大地减少图片的大小。

2K11 0

前端性能优化-图像优化

png又分为png8、png24和png32，png8表示支持2^8个种颜色，通常png8是最通用的web图片格式。...2、图像优化 1) jpg or png 对于颜色较多的图像，使用jpg更好，因为png可以选择使用调色板颜色更多的png24，得到的图片比jpg大。...对于颜色简单对比强烈的图像，使用png更好，因为png使用调色板颜色最少的png8就可以满足显示效果，且得到的图片相对较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。...2) 将png24|32转化为png8 某些png24|32图片的颜色较为简单，将其转变为png8的显示效果类似，但能明显减小图片的大小。...可以使用完全免费的工具pngGo来完成，且可根据需要设置png所需的调色板颜色数，得到最大的压缩效果。

8241 0

前端切图-PhotoShop软件使用教程(png+jpg格式图片)

其实不然，这篇文章适用于计算机出身的前端甚至后端、对于ps等设计软件没有基础的人使用的，用来把设计师交于前端工程师的设计图稿或者psd源文件提取、整理，转化成布局页面时使用的图片。...再者，前端这个职业，很不希望被人认为是切图的，现如今的前端工作，并不是单纯的切一下ps图那么简单的事情。本篇文章所展示的也只是前端工作中的沧海一粟、九牛一毛。。。...一、切JPG图 1．打开ps导入图片的步骤是铁定的了 2．选择左边工具栏里的“切片工具” 事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标...”是指8位索引色位图，“PNG24”是24位索引色位图； png8：每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，例如纯色、logo、图标等；...因为颜色数量少，所以图片的体积也会更小； png24：每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；所以“png24”所展示的图片颜色会更丰富，

1.7K10 0

PS-前端切图教程（切jpg图和切png图）

其实不然，这篇文章适用于计算机出身的前端甚至后端、对于ps等设计软件没有基础的人使用的，用来把设计师交于前端工程师的设计图稿或者psd源文件提取、整理，转化成布局页面时使用的图片。...不过，作为一个设计出身的前端来说，摸ps就和摸键盘一样了 PS切图步骤说明一共分两大项：切jpg图、切png图。...事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标 ?...9．选择png-8/png-24格式，看你对图标的要求了 PNG8”是指8位索引色位图，“PNG24”是24位索引色位图； png8：每一张“png8”图像，都最多只能展示256种颜色，所以“png8...”格式更适合那些颜色比较单一的图像，例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小； png24：每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大

15.7K5 0

H5 常见性能优化和原理分析

它有着PNG8，PNG24，PNG32三种格式，即8位，24位，32位索引。PNG的文件格式内部有一个调色板。...而PNG24的图片是需要2^24色，即一个像素的颜色他需要24bit去索引，所以png24去索引一种颜色需要的数据长度是png8的3倍，同时不支持透明，png32的图片就是在png24的基础上增加了透明的功能...若是图片色彩不是很丰富且比较单一的情况下，可以考虑使用PNG8的图片，如果是图片色彩很丰富则可以选取 PNG24 或 PNG32 位的图片以减少图片资源的大小。...常见图片格式使用场景： JPEG: 图片的压缩率比较高，适用于作为背景图片，头图的情况适用于大面积背景的情况下使用。...例如一些电商的页面展示商品，在浏览器滚动到的地方加载相应的数据，而不是一口气把所有的数据全部列出来。

1.2K7 1

OpenGL 实现视差贴图与 UE 中的凹凸贴图偏移（Bump Offset）

视差贴图存在一定的局限性，主要在于点 B 和向量 P 之间有时候变化很块导致预测误差较大，所以才有了后面的陡峭视差映射和视差遮蔽映射，在 UE 中也提供了视差遮蔽映射的计算，不过本篇先使用简单的视差映射...BumpOffset 使用首先针对每个像素都要有个高度值，这一般用个高度图来表示就行了，对应 BumpOffset 中的 Height 节点，其实也可以用一个常量来表示高度值。...一般都是用一张高度度来表示每个像素的高度信息，不过 BumpOffset 并不接受 RGB 通道作为连接节点，因为高度信息使用 R、G、B 单个通道来表示就行了。...不光是 BumpOffset 有这系数操作，在涉及到纹理采样的操作中都会有对采样后的 RGB 数据进行相应的调节操作，比如对采样后的 RGB 数据乘以 1 保持原始状态，也可以把要乘的数作为参数暴露给外界进行调整...其中输入参数 Heightmap Texture 对应高度图纹理对象，不再是纹理采样，而 Heightmap Channel 表示选择纹理对象的哪个通道作为高度值，UVs 表示对高度图纹理坐标进行相关操作

1.1K2 0

ISUX译文 | The PBR Guide基于物理的渲染指引(下)

设计师应该学会如何应用这些规范和原则而不是被他们所限制。...可以试想一下，以碳作为最黑的物质，而雪作为最亮的物质。虽然碳的固有色看上去是黑的，但是它不是0.0的黑，同样雪也不是1.0白。...作为一个灰度贴图，他的作用就类似于一个图层遮罩，告诉着色器应该如何去解读Base Color贴图中的RGB数据。...高度同样不是一个必要的贴图通道，而且它也是由PBR着色器里的纹理采样器提供的。...一个比较推荐的实操方式是，用模糊/精度较低的高度贴图来塑造置换体的外形，并且减低它的高频细节。然后，再用法线贴图来提供高频细节，而高度贴图只置换了整体轮廓。

1.3K2 0

被刷屏的塞尔达来了，附源码！

，而是从色彩、明暗、对比度等方面进行风格独特的艺术表达，在绘画感上更接近于水彩，并大量使用亮色作为主色调，通过艺术化的颜色来展现世界，而非纯粹追求写实，使画面更有卡通幻想色彩。...我们发现草左右来回大幅度摆动看起来是比较奇怪的，正常情况下草地被吹动后回摆的幅度是小而自然的。...阵风效果风不是一直连续刮过来的，一般是一股一股风吹过来。下图来自现实中阵风吹过草地的效果，可以看到草地在局部中会形成明暗变化。 ? 我们可以使用噪声贴图来模拟这一效果。...要做到这一点，我们需要将希望产生交互的物体绘制到一张高度贴图上，贴图中的信息包括物体的高度、物体在 XZ 轴上挤压的方向、挤压的力度。...为高度图摄像机拍摄的范围 // 使用像素的世界坐标值减去高度图摄像机的世界坐标再除以范围就可以得到高度图中的 uv 坐标 vec2 getBendMapUV(in vec3 wPos) {

1.1K2 0

UnityShader 表面着色器简单例程集合

应用不同的凹凸贴图到同一个模型的不同实例的能力，给了每个实例一种不同的表面外观。例如，一个建筑物模型能够被用一个砖凹凸贴图渲染一次，而第二次使用泥灰凹凸贴图。...法向量贴图是凹凸贴图的一种形式，对于法向量贴图来说，存储在纹理元素中的不是颜色值，而是法向量。每个法向量是一个从表面向外指的方向向量。传统的RGB纹理格式用来存储法向量贴图。...③从高度图生成法向量贴图高度图纹理对每个像素的高度进行编码，而不是对向量进行编码，因此，高度图在每个纹理元素存储了一个单独的无符号分量，而不是使用3个分量来存储一个向量。...我们的法线贴图可以从高度贴图中生成，生成规则是：计算高度图一个纹理元素对应的法向量，需要对给定的纹理元素、它正上方和右方的纹理元素的高度进行采样，采样得到了三个高度值：给定纹理元素的高度Hg，给定纹理元素正上方纹理元素的高度...z分量通常被存储在蓝色分量重，而范围压缩把z值转化到[0.5,1]范围，因此，存储一个RGB纹理中经过范围压缩的法向量贴图最主要的颜色的蓝色： ?

3.1K6 1

基础渲染系列（六）——凹凸

如果我们将此高程数据存储在纹理中，则可以使用它来生成每个片段而不是每个顶点的法向矢量。这个想法被称为凹凸贴图，最初由James Blinn提出。这是一张曾经伴随我们的大理石纹理的高度图。...（使用高度作为颜色） 1.2 调整法线因为我们的片段法线将变得更加复杂，所以让我们将其初始化移到一个单独的函数中。此外，先注释高度图测试代码。 ?...可以通过将高度差乘以δ或通过将切线中的δ替换为1来实现。 ? ? （缩放高度）看起来开始有点样子了，但是照明不正确，太黑了。那是因为我们直接使用切线作为法线。...用于颜色的位数随每个通道而变化。R和B分别获得5位，G获得6位，而A获得8位。这就是X坐标移至A通道的原因之一。另一个原因是RGB通道获得一个查找表，而A获得其自己的查找表。...现在，当我们需要主UV时，应该使用i.uv.xy而不是i.uv。 ? 将细节纹理分解为反照率。 ? ? ?

3.5K4 0

开源OCR引擎Tesseract

但作为一个引擎，它只提供命令行工具。...ImageMagick是免费软件：全部源码开放，可以自由使用，复制，修改，发布。它遵守GPL许可协议。它可以运行于大多数的操作系统。ImageMagick的大多数功能的使用都来源于命令行工具。...PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PFA, PFB, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG24..., PNG32, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSD, PTIF, PWP, R, RAS, RGB, RGBA, RGBO, RLA, RLE, SCR

7.7K10 1

前端成神之路-品优购代码规范

根据 IETF对UTF-8的定义，其编码标准的写法是 “UTF-8”；而 UTF8 或 utf8 的写法只是出现在某些编程系统中，如 .NET framework 的类 System.Text.Encoding...在 HTML 中不能使用小于号 “”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体推荐： more>><...图片规范内容图内容图多以商品图等照片类图片形式存在，颜色较为丰富，文件体积较大优先考虑 JPEG 格式，条件允许的话优先考虑 WebP 格式尽量不使用PNG格式，PNG8 色位太低，PNG24...，优先考虑使用 PNG8 格式，避免不使用 JPEG 格式图像颜色丰富而且图片文件不太大的（40KB 以下）或有半透明效果的优先考虑 PNG24 格式图像颜色丰富而且文件比较大的（40KB - 200KB...nav{ color: #fff; } 不推荐： .jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; } 颜色值 rgb

6801 0

为你重新系统梳理下， Web 体验优化中和图有关的那些事（万字长文）

通道：RGB 三种颜色信息称为红通道、绿通道、蓝通道，透明度是 Alpha 通道。 ◎ Web 中常用图格式说明 JPEG/JPG：使用 JPEG 格式压缩的图片文件，是目前应用最广泛的图片格式之一。...PNG：PNG 是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色方案以及 Alpha 通道等特性。PNG 的开发目标是改善并取代 GIF 作为适合网络传输的格式而不需专利许可。...PNG 有 png8、png24、png32 之分。 png8: 最多支持 256 色的 PNG，无损、索引色的位图。非动图可以替代 GIF，体积更小，透明度支持也更好。...HTTP/1.x 协议以换行符作为纯文本的分隔符，而 HTTP/2 将所有传输的信息分割为更小的消息和帧，并采用二进制格式对它们编码。...当页面的 scrollTop 与浏览器的高度之和大于图片距页面顶端的 Y (注意是整个页面不是浏览器窗口)时，说明图片已经进入可视区域，这是把 data-src 的值放到 src 中即可。

1.3K2 0

《Unity Shader入门精要》笔记：初级篇（3）

i.worldNormal); fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos)); //使用采样结果和颜色的乘积作为反射率来使用...（诸如纹理，法线贴图等），书中有Texture属性，但在新版本编译器中应该是以Default选项作为了代替。...方法： 1、高度映射（height mapping）：使用高度纹理（height map）来模拟表面位移，然后得到一个修改后的法线值。...法线纹理：法线纹理存储的是表面的法线方向，法线方向的分量范围在[-1,1]，而像素的分量范围在[0,1]所以就要进行映射。...每一个模型都有一个自己的切线空间，远点是该顶点本身，z 轴是顶点的法线方向，x轴是顶点的切线方向，y轴可以由法线和切线叉积而得，也被称为副法线。使用模型空间存储优点：实现简单，更加直观。

5832 0

【Arm-2D】不整活儿玩啥GUI？

RGB565的颜色格式，因此保存在数组 c_bmpDoge[]里的像素是16位的，需要2字节对齐；同理，如果你使用的颜色格式是32位的，则需要使用__attribute__((aligned(4)))来确保一个不低于...< 素材d额高度 }, }, .tInfo.bIsRoot = true, //!...< 指向资源的指针 }; 这里，我们使用了C99标准引入的结构体初始化方式（可惜这一方式C++并不认可），并分别提供了以下信息：素材的长宽尺寸；当前的贴图是一个“根”贴图（bIsRoot = true...怎么样，是不是血压一下就上来了？...考虑到，如果你真的把这样的效果作为界面背景呈现给你的用户，我估计屏幕的损坏率可能会出奇的高： ?

8951 0

灰度图,法线贴图，置换贴图和位移贴图

值得注意的是，这种贴图表面上存储的东西是高度域－－即每个点和原始表面的高度差，记住，每个点的颜色不是色彩，是高度，一个数值！因此，对这个贴图做任何的操作都会影响到这个物体3D的外观质感。...在游戏中，所使用的算法确切的说应该叫做fake bump mapping ，假凹凸贴图。因为在游戏中Bump Map并没有改变物体的表面而只是影响光照的结果，欺骗眼睛而已。...这两种算法的方式都是只对物体3D模型的顶点计算光照，而3D表面上的大面积区域则使用差值填充。...特别是它的优点是所消耗的代价极为有限，而需要增加的工作量只是让美工把高度图保存到Alpha通道里而已。很划算。但是对于技术研究者来说，这样的表现显然还是不够令人满意的。...只增强面对屏幕的多边形的表面粗糙细节，而不是整个模型。因此性能代价并不会像直接上高模那么大。相比来说位移贴图在效果上是没有任何瑕疵的，但是也未必没有缺点。

1.7K2 0

前端常见面试题

storage和cookie的区别 1.Web Storage能提供5M的存储空间（不同浏览器不同），Cookie提供4K的空间 2.Web Storage中数据仅仅是本地存储，不会与服务器发生任何交互，而Cookie...1. png24位的图片在iE6浏览器上出现背景 ? ? ? 解决方案：做成PNG8，也可以引用一段脚本处理. 2. 浏览器默认的margin和padding不同 ? ? ?...( _ 这个符号只有ie6会识别) 3 html5有哪些新特性 HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 1....使用function定义的对象与使用new操作符生成的对象之间有一个重要的区别。...2.使用new Object()的方式, 内置构造函数的方式 ? 3.使用简单工厂方法创建对象. ?

4342 0

常见图片文件格式简析下载_图片的文件格式有哪些

JPEG的图片使用的是YCrCb颜色模型,而不是计算机上最常用的RGB.关于色彩模型,这里不多阐述.只是说明,YCrCb模型更适合图形压缩.因为人眼对图片上的亮度Y的变化远比色度C的变化敏感.我们完全可以每个点保存一个...PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。 PNG另一个非正式的名称来源为递归缩写：“PNG is Not GIF”。...PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。...格式最高支持色彩通道索引色编辑支持透明支持 PNG8 256索引色支持支持设定特定索引色为透明色（布尔透明）支持为索引色附加8位透明度（256阶alpha透明） PNG24 约1600万色...然而，编码器和解码器必须把代码作为固定的二进制值，而不是字符串。数据块. 数据块的数据字节，以适当的组块的类型，如果有的话。该字段可以是长度为零。循环冗余检测.

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭