美术如何创建 skybox 贴图资源?

news2024/9/21 16:38:30

文章目录

  • 目的
  • PS手绘+Panorama To Cubemap
  • PS手绘+Pano2VR
  • Skybox & Cubemap Tutorial (Maya & Photoshop)
  • Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整
  • PS直接手绘 cubemap
  • Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用
  • Blender cube->to sphere->再绘制模型上的纹理 (50s教程)
  • 其他的
  • References


目的

学习新的自定义天空的做法
可以再日后,自己制作,或是教会美术如何制作

这篇文章只有 美术相关的内容
程序的可以是 连连看,或是 自己撸代码实现 程序化天空盒


PS手绘+Panorama To Cubemap

参考视频:Create Custom Skybox for Unity with Photoshop - 这个是直接使用 PS 手绘 + Panorama to cubemap

PS手绘-Panorama图

方法很简单

  1. 暗灰 填充 地板
  2. 暖白 填充 顶部
  3. 使用画笔工具+SHIFT健 绘制水平面上的晚霞:橙红、橙色、蓝色,然后高斯模糊

最后生成这种的一张图:
在这里插入图片描述

Panorama To Cubemap,将刚刚PS手绘的的天空盒转为Cubemap
使用在线将全景图转为Cubemap 图
在线工具:Panorama to Cubemap
在这里插入图片描述

在这里插入图片描述


PS手绘+Pano2VR

PS手绘-Panorama图
在这里插入图片描述

Pano2VR,将Panorama图转为Cubemap

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
导入unity使用

在这里插入图片描述

顶部扭曲变形比较严重
在这里插入图片描述

调整 Invoer selecteren
在这里插入图片描述
选择 Clinder
在这里插入图片描述
调整前缀重新导出
在这里插入图片描述

可以看到顶部和底部都是用有问题的
底部的我们可以不管,只用会之前的就OK,因为几乎是纯颜色的
在这里插入图片描述

在这里插入图片描述

PS再次手绘调整顶部内容

在这里插入图片描述

调整为:
在这里插入图片描述

最终unity再次验证效果
可以看到,侧边的像素变形那边么严重了
顶部的也不会黑块了
在这里插入图片描述


Skybox & Cubemap Tutorial (Maya & Photoshop)

虽然这种方式不太高效 和 方便,当也算是其中一种制作方式

Skybox & Cubemap Tutorial (Maya & Photoshop) - 从maya如何建模cube,展开UV,如果从PS中抠图,反正各种P图,生成Cubemap,注意好每个面的UV相邻边的内容要对上,讲得非常详细

在这里插入图片描述

展开UV
在这里插入图片描述

每个UV之前的面、临边 的拓扑关系如下:
在这里插入图片描述

在这里插入图片描述

如果UV相邻关系不对,则需要调整,如下:
在这里插入图片描述

注意每个相邻便需要保留的像素为,这部分的 “倒梯形” 的像素内容
在这里插入图片描述
最后重新调整 uv 与 图像对齐
在这里插入图片描述


Unity 中使用 ReflectionProbe 生成 Cubemap 然后再 PS 调整

还有一些是在引擎中,使用烘焙工具生成 cubemap的
unity 中的话,先布置好场景,然后给需要拍摄的位置,放一个 ReflectionProbe 组件,选择 Type : Bake,然后点击 bake 即可

在这里插入图片描述

然后将 Inspector 选择 debug 模式
在这里插入图片描述

点击 Baked Texture 对应的 ReflectionProbe-0 ,让 Project 视图自动选中,对应烘焙出来的 cubemap
然后我们将这个 cubemap CTRL +D 复制一份出来,在放到我们对应的资源目录
如果需要调整的话,我们可以在PS 中自行PS,方法和之前的差不多,不过这次我们是在 cubemap 图下调整的
而不是panorama图,所以我们注意边界详解的问题
在这里插入图片描述

在PS中打开,看着个 “十字” 图不太一样
在这里插入图片描述

然后我们标记上序号
看看 unity 里面的对应的方向
在这里插入图片描述

从下图中,我们可以看出来:

  • 1是前
  • 2是后
  • 3是上(顶)
  • 4是下(底)
  • 5是相对1号的左手
  • 4是相对1号的右手
    在这里插入图片描述

在 unity 对应的 cubemap UV种类,有 竖、横 的十字,也有 竖、横 的一字,如下
参考unity 手册:Cubemaps
在这里插入图片描述

上面的方向你要看懂的话,需要想了解unity 的轴向,如下图
在这里插入图片描述

  • 右边,是x轴正方向 (左边,就是x轴负方向)
  • 上面,是y轴正方向 (下面,就是y轴负方向)
  • 前面,是z轴正方向 (后面,就是z轴负方向)

UE 应该也有类似的工具


PS直接手绘 cubemap

参考视频: How to create a hand-painted skybox for Unity using Photoshop | Mini-tutorial

和之前一样,你想要了解 unity cubemap uv 的坐标种类
在这里插入图片描述
还有 panorama 全景 uv,叫做:LatLong (Latitude-Longitude, sometimes called cylindrical) uv 布局
在这里插入图片描述

然后你可以,这上面的 uv layout 图,放到 unity 里面,看看效果
在这里插入图片描述

这里使用的是 横向 的十字 uv
在这里插入图片描述

后面就没啥可以说的了,直接绘制 cubemap 内容


Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用

参考视频: Creating Cubemap Skybox in Blender 2.9 for Unity - Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用

先 在 polyhaven/hdris 找一张 HDR 的 panorama 图

在这里插入图片描述

然后丢到 blender 里面,设置好 材质,使用上刚刚那个 panorama 贴图,然后烘焙 cubemap

如下,直接烘焙 diffuse color,margin=0px (就是不需要 uv 间隔)
在这里插入图片描述

下面是烘焙参数
在这里插入图片描述
然后将导出来的cubemap,使用PS裁剪画布顶底多余的区域
在这里插入图片描述

然后直接导入 unity 里面使用,设置好 texture 的 参数,完毕


Blender cube->to sphere->再绘制模型上的纹理 (50s教程)

参考视频: Blender Quick Tutorial - Sky Box

首先,开局一个 cube
在这里插入图片描述
将uv切开,设置为 横向 十字 uv
在这里插入图片描述
在这里插入图片描述

然后 细分一下面数
在这里插入图片描述

点两下 subedivide,细分两级即可,如下图
(按照你的需求,你可以多细分一些也是OK的)
在这里插入图片描述

然后我们使用 to sphere
在这里插入图片描述

调整到接近球体
在这里插入图片描述

然后再 flip normals 一下 (翻转法线,这样可以再 blender 里面进入这个 sphere 里面图画 cubemap 的内容)
在这里插入图片描述

将面的法线平滑一下
在这里插入图片描述

然后进入到 texture 里面图画
在这里插入图片描述

在 Texture Paint 模式里面,你可以抠图进来贴到 sphere 内壁,或是手绘 sphere 内壁的纹理就O了
在这里插入图片描述

然后将这图导入游戏引擎使用就O了
在这里插入图片描述


其他的

  • 还有一些是使用 野外实景 拍摄,使用相机 前后左右顶底 6个方向拍摄 cubemap 素材,然后回来PS合成调整的方式生成 cubemap
  • 还有另一种是直接使用 panorama 拍摄设备,拍下来就是全景
  • 还有一种使用 PS 里面的 3D/Sphere Panorama 菜单的功能 (不过现在这个功能给 adobe 从 后续新的 PS 中剥离出去了,改成独立收费的另一个软件,也是给别人吐槽疯了)
  • 还有 shader 程序化天空盒,这里不讲,感兴趣自行搜索

大家也可以自行去搜索
我上面就是搬砖,thx for you watching…


References

  • Create Custom Skybox for Unity with Photoshop - 这个是直接使用 PS 手绘 + Panorama to cubemap
  • Skybox - Photoshop to Unity 3D - PS手绘+Pano2VR
  • Creating Cubemap Skybox in Blender 2.9 for Unity - Blender 导入 Panorama,然后烘焙到 cubemap,再导入unity中使用
    • 还有另一个类似的,不过这个视频更早的: Blender Series: Create A Video Game Skybox

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144487.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

git教程(1)---本地仓库操作

git教程 git安装-Centos基本操作git initgit config工作区和版本库工作区暂存区/索引版本库 添加文件---场景一git statusgit log查看.git目录结构 添加文件---场景二修改文件版本回退撤销修改场景一只有工作区有code工作区和暂存区有code所有区域都有code并且没有push到远程仓…

【Java网络原理】 五

本文主要介绍了TCP传输控制协议的报头字段意义以及TCP协议的十大核心特性。 一.TCP传输控制协议 1.TCP报文格式 >端口 范围是0-65535 ,只有确定了端口号,才知道把数据报交给哪个应用程序。 >4位首部长度 TCP报头是变长的, 4bit的范…

Servlet核心API

目录 HttpServlet init destory service 实例:处理get、post、put、delete请求 1.通过postman得到请求 2.通过ajax得到请求 HttpServletRequest 常见方法 前端给后端传参 1.GET,query string 2.POST,form 3.POST,json HttpSeverletRespons…

数据类型与运算符-java

数据类型与运算符 1、变量和类型 1.1、整形变量 基本语法格式: int 变量名 初始值;代码示例: int num 10 //定义一个整型变量 System.out.println(num);注意: 1)java中,一个int变量占4个字节,和操作…

【ChatGPT系列】ChatGPT:创新工具还是失业威胁?

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

进程、线程、处理机调度

程序:存放在磁盘中的可执行二进制文件(即*.exe文件,包含一系列指令集合)。是静态的。 进程:程序的一次执行过程。是动态的。同一个程序多次执行将对应多个进程。 线程:轻量级进程。一个进程至少有一个线程…

qml之ui控件

文章目录 ui控件移动版风格嵌套页面并排界面 ui控件 Qt Quick控件用于创建由标准化组件(如按钮、标签、滑块等)构建的用户界面。 QtQuick.Controls:基本控件。QtQuick.Templates:为控件提供行为化的、非可化视的基本类型。QtQui…

STM32 CAN使用

STM32 CAN使用 简介各种通讯接口对比报文总线上的报文信息表示为几种固定的赖类型数据帧列表模式掩码模式配置CAN配置参数位时序 简介 控制器局域网CAN(Controller Area Network)是由德国博世公司为汽车应用而开发的多主机局部网络,用于汽车的监测和控制…

React 生成传递给无障碍属性的唯一 ID

useId() 在组件的顶层调用 useId 生成唯一 ID: import { useId } from react; function PasswordField() { const passwordHintId useId(); // ...参数 useId 不带任何参数。 返回值 useId 返回一个唯一的字符串 ID,与此特定组件中的 useI…

【CSS】包含块

CSS规范中的包含块 包含块的内容: 元素的尺寸和位置,会受它的包含块所影响。 对于一些属性,例如 width, height, padding, margin,绝对定位元素的偏移值(比如 position 被设置为 absolute 或 fixed)&…

『第十章』仪态万千的雨燕:UIKit 和 SwiftUI

在本篇博文中,您将学到如下内容: 1. 老骥伏枥:AppKit 和 UIKit2. 雨燕的新装:SwiftUI3. SwiftUI 原生视图4. SwiftUI 容器4.1 ViewThatFits4.2 自定义布局(Custom Layout)6. SwiftUI 修改器(Modifiers)6.1 修改器修饰作用域6.1 自定义修改器5. SwiftUI 状态:真相之源(S…

在spring boot+vue项目中@CrossOrigin 配置了允许跨域但是依然报错跨域,解决跨域请求的一次残酷经历

首先,说一下我们的项目情况,我们项目中后端有一个过滤器,如果必须要登录的接口路径会被拦下来检查,前端要传一个token,然后后端根据这个token来判断redis中这个用户是否已经登录。 if (request.getMethod().equals(&qu…

20、Python -- 变量作用域、局部函数

目录 变量作用域变量?字典?获取变量字典变量遮蔽解决方法:方法1:使用globals访问全局变量方法2:在函数中声明全局变量 局部函数封闭函数返回局部函数代码演示另一种写法 局部函数的遮蔽问题如图:解决方法&a…

深入理解Java中的转义字符

最近在学习《两周自制脚本语言》这本书,在词法分析的一些复杂的正则中用到了大量的转义字符’\,比如正则字符串中包含了这个部分\\\\\"你知道它是匹配什么的么? 反斜杠在字符串和正则表达式中都有特殊作用。今天让我们来深入理解一下Ja…

如何使用drawio画流程图以及导入导出

画一个基本的流程图 你可以在线使用drawio, 或者drawon创建很多不同类型的图表。 如何使用编辑器,让我们以一个最基本的流程图开始。 流程图,就是让你可视化的描述一个过程或者系统。 图形和很少部分的文字表达就可以让读者很快的理解他们需要什么。 创…

文心大模型走进高校!百度携手吉林大学计算机学院成功举办AI师资培训

随着人工智能技术的快速发展,大模型已经成为了人工智能的主流发展方向,同时也对新时代AI人才的培养带来了新的思考与挑战。为了推动大模型及人工智能相关专业人员的培养,10月20日-22日,百度飞桨携手中国电子学会,吉林大…

@TableLogic 这个注解的作用

TableLogic 是 MyBatis-Plus(一个 MyBatis 的增强工具)提供的一个注解,用于实现逻辑删除功能。 逻辑删除并不是真正从数据库中删除记录,而是通过在数据库表中设置一个标记字段(通常是一个状态字段,如 is_d…

【Linux】部署及发布单机项目及前后端分离的项目

目录 一、讲述 1. 为什么 2. 要求 二、单机项目 1. 本机测试 2. 部署 三、前后端 1. 准备 2. 部署 一、讲述 1. 为什么 实施部署和发布项目的目的是将软件开发的成果转化为可用的产品或服务,以满足用户的需求。以下是实施部署和发布项目的一些重要原因&am…

Proteus仿真--闪烁的LED灯

本文介绍一种基于51单片机实现的LED灯闪烁仿真(完整仿真源文件及代码见文末链接) 本文主要介绍51单片机的LED闪烁仿真设计,仿真文件截图如下: 仿真视频如下: Proteus仿真--闪烁的LED灯 附完整Proteus仿真资料代码资…

NlogPrismWPF

文章目录 Nlog&Prism&WPF日志模块实现原理添加配置注入服务应用测试其他模块怎么调用? Nlog&Prism&WPF 日志模块 介绍了为WPF框架Prism注册Nlog日志服务的方法 实现原理 无论是在WPF或者ASP.NET Core当中, 都可以使用ServiceCollection来做到着…