» cn.DX9 Rendering
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

cn.DX9 Rendering

English | German | French | Italian

The original english version of this page is newer and may contain information this translation does not have! Click here to view the english version.

DX9 渲染

导言

DirectX是一种Windows技术,它为个人电脑提供了高性能的图形技术。DirectX能对现今图形卡上的复杂的三维渲染硬件直接访问,从而保证了速度。vvvv就是基于DirectX 9实现的。

vvvv提供了图形生成器,用以产生诸如矩形、网格、线条等图形对象,vvvv也包含了变换这些图形元素的节点,它们使用了经典的矩阵变换方法(转换, 缩放,旋转,比例因子修正, 反转, 和透视投影)。通过顺次联合多个变换节点可以产生复杂的运动结构。

随着现在的图形显示卡在设计制造时就特别专注于材质贴图性能的提升,vvvv具备了直接向多面体贴图的能力。由于图像的映射计算时在显卡上完成的,vvvv在处理有贴图的三维对象时仍然表现飞快。vvvv可以导入标准的图像格式如BMP,JPEG,PNG等。贴图可以加以变换(缩放、转换等),如同对图形对象一样。由于具备读取透明层数据的能力,vvvv可以使用文件贴图来创建遮罩和alpha通道。

DirectX的全屏模式直接接管了机器,使图形输出运行的帧速率最佳。全屏模式就是为了让程序运行时没有滞缓和抖动 - 动画总是被精确地渲染以符合帧速率,这样可以得到最佳地适合于电视播出的图形应用。

vvvv的组件可以直接操纵显卡的底层功能和数据,从而对用于渲染的硬件电路提供了更为精准的调节。vvvv有意要依赖于硬件 - 某些功能在特定的显卡上表现更好。对很多传统的程序来说这不合常规,但这却能得到媲美于当今的计算机游戏的高性能渲染。

开始DirectX

在下面的教程中,我们要用 Renderer (EX9) 建一个简单场景.

首先, 打开一个新的程序片:
盘古开天地,我们需要一个 Renderer (EX9)。确保你创建了一个DX9版本的而不是GDI或TTY版本的渲染器。在DirectX载入时计算机可能有一点点停顿。现在第二个标题为 "DirectX Renderer"的黑色窗口出现了。

接下来我们需要一个渲染节点: 我们从菜单中选择创建一个 Quad (DX9)

请注意只有 Renderer (EX9) 类型的节点才会显示在渲染窗口里: e GDI渲染系统是独立于DX9渲染系统的 – 你不能混合不同渲染系统的结果,但可以使用GDITexture节点来把GDI窗口里的内容作为一种材质在DX9窗口中使用。

Quad在渲染器中以默认的尺寸在默认的位置上呈现为一个白色方块。要想移动这个物体,需要一个或几个变换节点(Transform Nodes)。建一组变换节点: 一个 Scale (Transform), 一个 Translate (Transform), 一个 Rotate (Transform), a Transform (Transform 2D) 和一个 Trapeze (Transform) 节点:

Scale (Transform) 连接到Quad然后改变 Scale (Transform) 的输入引脚X和Y,可以发现宽度和高度在起变化。 然后取消连接,注意矩形跳回到原来的尺寸了。

请注意这与通常的行为有异:一个节点在连接被断开时通常会保留当前值。后面的章节我们会解释这么做的原因,以及为什么这么做是为得到更大的好处付出的代价。现在只需要记住变换节点是当连接被断开是值会被保留这一规则的一个例外就好了。

现在再试试 Translate (Transform)Rotate (Transform) 节点。你会发现可以通过这几个节点位移和旋转该矩形。在试验那些引脚时,你也许留意到某些引脚不起作用- 这是因为这些节点都是在三维空间中工作的,但我们尚未连接摄像机。所以现在我们不妨忽略这些引脚,而专注于有影响力的引脚。

接下来连接多个变换节点:

这样是什么意思?重要的是要理解这意味着一系列的操作。我们首先做缩放,然后是位移, 接着是旋转。在仔细思考一下这个问题并略做试验后,你会注意到,次序很重要,要按正确的次序来做事!

接着再试试 Transform (Transform 2D) 节点:

Transform (2D) 节点具备在二维空间里工作所需的所有参数。这个节点仅仅是常用操作的一个快捷方式。所以当你想在渲染窗口的某处放置一个物体时,你不需要单独使用缩放、位移和旋转节点 - 你可以在Transform (2D) 节点中完成所有工作。

这个节点还有一个版本,叫做 Transform (Transform 3D),它有更多的输入引脚,并能使你在三维空间中放置物体。不过等等,没有摄像机,你是找不到3D的感觉的。

你还可以试试看 Trapeze 节点。它能将 Quad (DX9) 变形为一个吊杠。

现在删去所有的变换信息: 为什么这个节点叫做一个 Quad? 你能注意到这并不是一个正方形:quad节点显然没有作出一个正方形而是一个矩形。这事是怎么发生的?

坐标系统

要理解这一点,我们需要观察一下渲染器的坐标系统:

窗口区域有一个默认的范围,即在两个维度上都是 -1 到 +1。原点(0,0)在窗口的中央。

还有一个z轴,上图中没有显示。z轴的正向是指向屏幕里面的,这一设置也称为左手坐标系。默认的投影是平行投影,故你没法在下面的例子中注意到z轴的存在

标准的quad的宽和高都是1,中心点在(0, 0)。因此quad在两个维度上都是从 -0.5 到 +0.5。

现在将渲染窗口缩放到成一个很宽的矩形:

你会发现quad被拉伸得越来越厉害, 因为坐标系也按窗口一样的方式被拉伸了。

渲染窗口的比例因子是依赖于窗口尺寸的: 如果你将渲染窗口也调整成正方形,那么quad也变正方形了。

但我们如何让quad成为一个正方形呢?画出一个正方形总是赏心悦目的,但当我们切换到全屏模式时,通常是一个4:3的比例因子。该问题的一个显而易见的解决方案就是在quad节点上应用一个Scale节点: 这样试试:重新调整渲染窗口到 4:3的现实比例(就像正常的计算机屏幕)然后将scale节点连接到quad:

渲染窗口的比例是 4:3, 因此我们将物体的X方向缩到0.75,物体就是正方的了。试试看。

不过这听上去挺烦的 -- 要为程序片里的每一个渲染节点都加一个缩放操作。正确的解决办法是应用渲染器的transform引脚:如果你连接 Transform (Transform 2d) 节点到 View Transform引脚,它就能影响到该渲染器里的所有物体: 连接一个transformation到ViewPort引脚就如同将该transform连接到了所有渲染节点。

有趣的是,quad看上去和之前一样。但这个场景的背后发生了什么呢?请看下图: 如果我们连接一个Scale节点到渲染器,坐标系统就变换了。原来在右上角的点(x=1, y=1)现在在视图里面了。

现在连接一个Translate节点到Scale: 你可以看到Quad在移动。你可以理解Scale和Transformation节点连到viewport引脚后变成了这个场景的一个非常初级的摄像机。 如果你连了什么东西到这个引脚,你并没有操控物体,而是操控显示这个物体的摄像机。

同时参见 视频教程 了解坐标系。

材质贴图

掌握了这些抽象的概念后,我们邀来在场景中增加一些有趣的图像。首先,清理一下程序,保留渲染器上的Scale节点。

接下来我们创建一个 FileTexture (EX9.Texture) 节点,然后将它连到quad上。o a right-click onto the FileName input of the 右击材质节点上的FileName引脚,从硬盘上挑选一幅图像。FileTexture节点可以掉入BMP、JPG、TIF或TGA文件到内存中 -- 本例中我们使用girlpower/images目录中的‘flower four.jpg’ 。

如果你想建立自己的材质贴图,参见 HowTo Prepare Textures

FileTexture (EX9.Texture) FileTexture 节点能够调入BMP、JPG、TIF或TGA文件到内存中。将你的材质贴图准备成16x16, 32x32, 64x64, 128x128, 256x256, 512x512, 1024x1024, 2048x2048 or 4096x4096 像素的尺寸,以获得速度和质量上的优化结果。贴图要尽可能地小,以期获得最快的速度

现在连一个Transform节点到Quad上的TextureTransform引脚。你会发现可以用transform来移动和放大quad上的图像。

同理,也可以缩小贴图并在Quad上重复纹理。将ScaleX和ScaleY设成5:

接下来,创建一个 Address (EX9.SamplerState) 节点并将其连到Quad上。Sampler State系列的节点控制贴图过程的单个属性。要设置属性值,只需将SamplerState连到物体上。如果你要设置多个参数,只需将多个不同的Sampler State节点连成一行。

现在再试试 Address (EX9.SamplerState) 的不同设置。可以看到不同的取决于不同的映射模式呈现出不同的模式。

铺展

我们对铺展的操作同样可以施加到三维物体上。如下设置程序:

将LinearSpread的SpreadCount设为6并改变Translate的输入值,可以看到quads在中心点散开去了。

混合

注意到多个物体互相交叠在一起了, 颜色是叠加的,类似于多个投影仪的影像叠加后得到的图像。这和GDI模式是很不一样的,在GDI模式中物体都是覆盖交叠的。

请注意你的电脑屏幕只有有限的亮度,DirectX会试图以白色来模拟非常亮和非常强烈的色彩。

创建一个 Blend (EX9.RenderState) 节点并将其连接到quad。 (确保没有选择该节点的高级版本)。然后你可以改变混合模式。这与Adobe Photoshop里的层的操作类似。试验不同的模式然后挑中一个, RenderState 系列的节点类似于SamplerState系列节点。

另一个有趣的选项是给quad染色。这个效果有点像在一个灯上加上一个有色滤罩。

3-D

直到目前为止,我们尚未真正在3D世界中遨游。我们已经看到了好些与Z值相关的引脚,但它们还没有做过什么精彩的亮相。我们也看到了如何使用ViewPort引脚来改变我们的坐标系统。

这一节中我们会探索这个引脚如何被用来建立透视。现在坐标系统可能变形得更加严重,但这会让我们在场景中获得三维视图。一个典型的坐标系统如下图所示。

创建一个 Perspective (Transform) 节点。这是一个实现了一台透视摄像机的最基本功能的特殊的变换节点:

一连上Perspective节点,屏幕就变黑了。为什么会这样?这是摄像机一个基本功能导致的简单结果: 物体接近摄像机时就会变大。我们尚未指定物体和摄像机之间的距离。当我们只是简单的创建了一个Perspective节点时,我们其实是把摄像机正好放到物体里面去了,这样物体当然就无限大了以至什么也看不见了。

所以,让我们拉开一点距离: 插入一个Translate节点,将Z设到大约1,注意到在我们改变z值的时候,图像开始重新显现出来了,并跟随变化。那是因为我们将摄像机移动到虚拟场景中了。

试着变化连在Quad上的Rotate和Translate节点上的输入引脚,观察物体在三维空间里的移动。

实际上,这个结构在三维空间里显得有点无聊,因为它只是一个简单的二维的盘片。为改善这点,在Translate和Quad中间插入一个 Rotate节点,这样插入是表示物体在铺展、旋转并位移之后再旋转。

现在改变新建旋转节点的X输入引脚,大概变到0.3,然后你看到那线Quads翻转了。

景深缓存

这张图有些毛病,不大搞得清楚哪个物体在前,哪个物体在后。 显然这些物体也不应该这样纠结在一起。

为什么会这样呢?vvvv里的物体通常按照它们连到 Group (EX9) 节点上的顺序来描绘。连接在最左边的那个最先画,连接到最右边的那个最后画,并且会显示在所有其它物体之上。
在我们的例子中,铺展生成了一系列的Quads: 先画第一片,最后画最后一片。不幸的是我们的结构形成了一个前后关系不够明朗的圆圈,所以后面画的物体都叠到本来应该看得见的物体上去了。

为了解决这个矛盾,发明了一种称为景深缓存的技术。要激活它,只需选择 Renderer (EX9) 并在属性检查器中查看它的配置引脚。注意 Windowed BackBufferFullscreen BackBuffer 引脚,将它们的枚举值改变到一个不同于 None 的值就可以激活景深缓存。枚举变量中的16/24/32等数值表示景深缓存的精度。典型的选择是24bit的精度。一旦你激活了景深缓存,你就会发现咬合关系的处理就正常了。

只要你不包括透明物体,咬合关系的处理也会正常。这是景深缓存算法的一个广为人知的限制。

尽管物体看上去有点怪,但还是挺花枝招展的。

GirlPower SoftImageTM 摄像机

摄像机的控制有时变得过于复杂,使得你不愿去对一个摄像机编程,而是想把精力投向你创造的物体。为此提供了一个模块, 来模拟三维造型软件SoftImage里面的摄像机控制。

为了使用该模块, 通过在程序片中双击然后从列表中选择 Camera (Transform Softimage) 来创建一个新节点。

要控制这台摄像机,你必须按住某些键同时拖动鼠标,以下命令都可用:

O 轨道 围绕某一视点旋转
Z 缩放 右键: 缩放(上下移动鼠标) <br>左键:移动摄像机
P 定位 向前或向后移动摄像机<br>右键: 快速<br>左键:慢速
R Reset Reset View to Default

同时把“modules\AxisAndGrids.v4p”这个程序片包含进你的项目也会比较好玩,它提供了两个很方便的键盘快捷方式:

A 显示坐标轴<br>x-轴: 红色<br>y-轴: 绿色<br>z-轴: 蓝色
G 网格 显示 x/z 平面上的网格 <br> 注意该网格在默认视图中表现为白色的线条。

3d图形加速卡术语

anonymous user login

Shoutbox

~4d ago

~7d ago

joreg: The Winter Season of vvvv workshops is now over but all recordings are still available for purchase: https://thenodeinstitute.org/ws23-vvvv-intermediates/

~14d ago

schlonzo: Love the new drag and drop functionality for links in latest previews!

~22d ago

joreg: Workshop on 29 02: Create Sequencers and Precise Clock Based Tools. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-08-create-sequencers-and-precise-clock-based-tools-in-vvvv-gamma/

~29d ago

joreg: Workshop on 22 02: Unlocking Shader Artistry: A Journey through ‘The Book of Shaders’ with FUSE. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-12-book-of-shaders/

~1mth ago

joreg: Talk and Workshop on February 15 & 16 in Frankfurt: https://visualprogramming.net/blog/vvvv-at-node-code-frankfurt/

~1mth ago

woei: @Joanie_AntiVJ: think so, looks doable

~1mth ago

xd_nitro: Anyone remember who increased projector brightness by removing some components that product the color?

~1mth ago

Joanie_AntiVJ: This looks super interesting (vectors over network) would anyone here know how to implement this in beta? https://github.com/madmappersoftware/Ponk