纹理贴图移动(水流、电流效果)

纹理贴图移动特效产生岩浆、瀑布效果

原理是改变动态改变纹理坐标uv的值,使之移动

首先准备好一张贴图

建立一个shader 变量一览: _MainTex 主纹理贴图 _MainTint 主要颜色   _ScrollXSpeed x轴移动速度 _ScrollYSpeed  y轴移动速度

	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_MainTint ("Diffuse Tint", Color) = (1, 1, 1, 1)
		_ScrollXSpeed ("X Scroll Speed", Range(0, 10)) = 2
		_ScrollYSpeed ("Y Scroll Speed", Range(0, 10)) = 2
	} 

主要是在surf函数里进行操作 fixed xScrollValue = _ScrollXSpeed * _Time; fixed yScrollValue = _ScrollYSpeed * _Time; x、y偏移量随时间增加

		void surf (Input IN, inout SurfaceOutput o) {
			fixed2 scrolledUV = IN.uv_MainTex;
			fixed xScrollValue = _ScrollXSpeed * _Time;
			fixed yScrollValue = _ScrollYSpeed * _Time;
			scrolledUV += fixed2(xScrollValue, yScrollValue);
			half4 c = tex2D (_MainTex, scrolledUV);
			o.Albedo = c.rgb * _MainTint;
			o.Alpha = c.a;
		} 

_Time是 unity shaderlab内置值 float4 _Time : Time (t/20, t, t*2, t*3) 是一个四维向量
scrolledUV += fixed2(xScrollValue, yScrollValue); uv的x,y值随时间累加偏移量
最后整合uv与主颜色到当前纹理上 产生了这种移动的效果

shader代码如下

Shader "Custom/testShader" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_MainTint ("Diffuse Tint", Color) = (1, 1, 1, 1)
		_ScrollXSpeed ("X Scroll Speed", Range(0, 10)) = 2
		_ScrollYSpeed ("Y Scroll Speed", Range(0, 10)) = 2
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200

		CGPROGRAM
		#pragma surface surf Lambert
		fixed4 _MainTint;
		fixed _ScrollXSpeed;
		fixed _ScrollYSpeed;
		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
		};

		void surf (Input IN, inout SurfaceOutput o) {
			fixed2 scrolledUV = IN.uv_MainTex;
			fixed xScrollValue = _ScrollXSpeed * _Time;
			fixed yScrollValue = _ScrollYSpeed * _Time;
			scrolledUV += fixed2(xScrollValue, yScrollValue);
			half4 c = tex2D (_MainTex, scrolledUV);
			o.Albedo = c.rgb * _MainTint;
			o.Alpha = c.a;
		}
		ENDCG
	}
	FallBack "Diffuse"
}
时间: 2024-10-24 07:36:57

纹理贴图移动(水流、电流效果)的相关文章

Three.js纹理贴图正方体旋转动画效果

在线演示 使用three.js生成的正方体选装3D效果. 推荐使用chrome等现代浏览器观看(需要支持webGL) 如果大家对three.js 3D类库比较敢兴趣,请访问以下课程库: Javascript 3D类库three.js基础入门介绍 相关代码: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(90, //vertical field of view (from bottom to top)

unity3d 纹理贴图移动特效产生岩浆、瀑布效果

纹理贴图移动特效产生岩浆.瀑布效果 原理是改变动态改变纹理坐标uv的值,使之移动 首先准备好一张贴图 建立一个shader 变量一览: _MainTex 主纹理贴图 _MainTint 主要颜色 _ScrollXSpeed x轴移动速度 _ScrollYSpeed  y轴移动速度 Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _MainTint ("Diffuse Tint", Col

基于Cocos2d-x学习OpenGL ES 2.0系列——纹理贴图(6)

在上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object).IBO(Index Buffer Object)和MVP(Modile-View-Projection)变换. 本文将在教程4的基础之上,添加纹理贴图支持.最后,本文会把纹理贴图扩展至3D立方体上面. 基本方法 当我们把一张图片加载到内存里面之后,它是不能直接被GPU绘制出来的,纹理贴图过程如下: 首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去: 然后

应用纹理贴图

为了在OpenGL  ES中启用纹理贴图功能,可以在Renderer实现类的onSurfaceCreated(GL10  gl  ,  EGLConfig   config)方法中启动纹理贴图,例如如下代码: //启用2D纹理贴图 gl.glEnable(GL10.GL_TEXTURE_2D); 接下来就需要准备一张图片来作为纹理贴图了,建议改图片的长宽是2的N次方,把这张准备贴图的位图放在Android项目的/res/drawable-mdpi目录下,方便应用程序加载该图片资源. 接下来程序开

用OpenGL进行立方体表面纹理贴图

一.目的: 掌握OpenGL中纹理对象的创建.绑定与使用方法. 二.简单介绍: 1,连接静态库 #pragma comment(lib, "glut32.lib") #pragma comment(lib, "glaux.lib") 2,载入位图图像到内存(这是固定用法) AUX_RGBImageRec *LoadBMP(CHAR *Filename) { FILE *File = NULL; // 文件句柄 if (!Filename) // 确保文件名已提供 {

【3.js探寻八】——法向材质与材质的纹理贴图

4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的颜色与照相机与该物体的角度相关,下面我们只改变照相机位置,观察两个角度的颜色变化: camera.position.set(5, 25, 25);的效果: camera.position.set(25, 25, 25);的效果: 我们观察的是同样的三个面,但是由于观察的角度不同,物体的颜色就不同了.

Directx11学习笔记【十七】纹理贴图

本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5596180.html 在之前的例子中,我们实现了光照和材质使得场景大大增加了真实感,然而材质提供的细节只是在顶点级别上,要想在像素级别提供细节还得借助于纹理,这次让我们学习dx11中一些有关纹理的基础. 1.纹理坐标 1 在direct3d中,纹理坐标用一个二维向量(u,v)表示,纹理左上角为原点,u正方向沿纹理水平向右,v正方向沿纹理垂直向下,且0<=u,v<

GLSL纹理贴图 【转】

转载:http://blog.csdn.net/hgl868/article/details/7872466 简单的纹理贴图(Simple Texture) 为了在GLSL中应用纹理,我们需要访问每个顶点的纹理坐标.GLSL中提供了一些属性变量,每个纹理单元一个: attribute vec4 gl_MultiTexCoord0; attribute vec4 gl_MultiTexCoord1; attribute vec4 gl_MultiTexCoord2; attribute vec4

OpenGL教程翻译 第十六课 基本的纹理贴图

OpenGL教程翻译 第十六课 基本的纹理贴图 原文地址:http://ogldev.atspace.co.uk/(源码请从原文主页下载) Background 纹理贴图就是将任意一种类型的图片应用到3D模型的一个或多个面.图片(也可以称之为纹理)内容可以是任何东西,但是他们一般都是一些比如砖,叶子,地面等的图案,纹理贴图增加了场景的真实性.例如,对比下面的两幅图片. 为了进行纹理贴图,你需要进行三个步骤:将图片加载到OpenGl中,定义模型顶点的纹理坐标(以对其进行贴图),用纹理坐标对图片进行