three中的着色器示例
其实在3D引擎/库的帮助下,我们做webgl开发的难度已经很大大地降低了,熟悉相关API的话,开发一个简单的3D程序可以说是很轻松的事情。
在我看来,webgl的核心就是着色器(顶点着色器、片元着色器),这两者决定了如何在屏幕上绘制出我们想要的效果。所以,无论你是刚入门的3D开发者(我也是刚刚探索3D领域)还是该领域的资深老鸟,对着色器的了解都是至关重要的。
我们一般的软件开发(例如一些管理系统、商城小程序),诸如这些业务逻辑性非常强的程序,都是依靠CPU的高速运算,而做WebGL(3D开发),我们写的程序代码是要跑在GPU上的,因为对于绘图能力来说,GPU是远远高于CPU的,所以,我们做的就是GPU编程了。
今天,就以一个demo来体会一下,three.js中如何编写自定义的着色器并运用到mesh材质上的。
(首先默认大家都已经学会three.js的一些基本操作,例如将一个three.js内置的面板PlaneGeometry放到场景中)
一、添加plane
function addplane(){
var planeGeometry = new THREE.PlaneGeometry(,)
var meshMaterial = new THREE.MeshPhongMaterial({
color: 0xfff000 * Math.random()
});
var plane = new THREE.Mesh(planeGeometry,meshMaterial);
scene.add(plane);
}
这个函数将会往场景中添加一个Plane,效果如下:
ok,这就是一个plane了。
二、着色器代码
<!-- 顶点着色器 -->
<script id="vertex-shader" type="x-shader/x-vertex">
void main(){
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
} </script>
<!-- 顶点着色器 -->
<script id="fragment-shader-3" type="x-shader/x-fragment">
uniform vec2 resolution;
vec2 rand(vec2 pos){
return fract( 0.00005 * (pow(pos+2.0, pos.yx + 1.0) * 22222.0));
}
vec2 rand2(vec2 pos){
return rand(rand(pos));
} float softnoise(vec2 pos, float scale){
vec2 smplpos = pos * scale;
float c0 = rand2((floor(smplpos) + vec2(0.0, 0.0)) / scale).x;
float c1 = rand2((floor(smplpos) + vec2(1.0, 0.0)) / scale).x;
float c2 = rand2((floor(smplpos) + vec2(0.0, 1.0)) / scale).x;
float c3 = rand2((floor(smplpos) + vec2(1.0, 1.0)) / scale).x; vec2 a = fract(smplpos);
return mix(
mix(c0, c1, smoothstep(0.0, 1.0, a.x)),
mix(c2, c3, smoothstep(0.0, 1.0, a.x)),
smoothstep(0.0, 1.0, a.y)
);
} void main(void){
vec2 pos = gl_FragCoord.xy / resolution.y;
pos.x += time * 0.1;
float color = 0.0;
float s = 1.0;
for(int i = ; i < ; i++){
color += softnoise(pos+vec2(i)*0.02, s * 4.0) / s / 2.0;
s *= 2.0;
}
gl_FragColor = vec4(color);
} </script>
顶点着色器中,进行了一系列的矩阵变换,将图形的顶点转换为屏幕上的像素点;
模型矩阵: 将顶点从局部坐标系转换到世界坐标系中;
视图矩阵: 将顶点从世界坐标转化到视图坐标系下;
投影矩阵: 将顶点从视图坐标系转换到规范立方体中(即屏幕中);
局部坐标系(模型/物体本身)----->世界坐标系----->视图坐标系----->屏幕。
片元着色器中,因为片元着色器是针对顶点着色器输出的顶点数据 (gl_Position)进行逐点绘制的,所以该着色器就是对每个点赋予一个颜色值,针对上面的片元着色器,他接受外界赋予的变量(uniform类型)。
三、着色器材质
下面我们就用两种着色器来生成一个材质。
//创建ShaderMaterial纹理的函数
function createMaterial(vertexShader, fragmentShader) {
var vertShader = document.getElementById(vertexShader).innerHTML; //获取顶点着色器的代码
var fragShader = document.getElementById(fragmentShader).innerHTML; //获取片元着色器的代码 //配置着色器里面的attribute变量的值
var attributes = {};
//配置着色器里面的uniform变量的值
var uniforms = {
scale: {type: 'f', value: },
resolution: {type: "v2", value: new THREE.Vector2(window.innerWidth, window.innerHeight)}
};
var meshMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
defaultAttributeValues : attributes,
vertexShader: vertShader,
fragmentShader: fragShader,
transparent: true
});
return meshMaterial;
}
四、利用shader材质重新绘制plane
function addplane(){
var planeGeometry = new THREE.PlaneGeometry(,)
var meshMaterial = createMaterial("vertex-shader", "fragment-shader-3");
var plane = new THREE.Mesh(planeGeometry,meshMaterial);
scene.add(plane);
}
效果:
五、其他着色器效果示例
three中的着色器示例的更多相关文章
- OpenGl中使用着色器的基本步骤及GLSL渲染简单示例
OpenGL着色语言(OpenGL Shading Language,GLSL)是用来在OpenGL中着色编程的语言,是一种具有C/C++风格的高级过程语言,同样也以main函数开始,只不过执行过程是 ...
- 在CG/HLSL中访问着色器属性(Properties)
在CG/HLSL中访问着色器属性 Shader在Properties块中访问材质属性.如果你想在一个着色程序中访问一些属性,你需要声明一个Cg/HLSL具有相同的名称和一个匹配的类型的变量. Prop ...
- 在CG/HLSL中访问着色器的内容
着色器在Properties代码块中声明 材质球的各种特性.如果你想要在着色器程序中使用这些特性,你需要在CG/HLSL中声明一个变量,这个变量需要与你要使用的特性拥有同样的名字和对的上号的类型.比如 ...
- BGFX 渲染引擎中着色器代码的调试方法
在实时渲染的图形开发中,着色器代码(Shader)越来越复杂,于是单纯的靠经验和不断试错的开发和调试方法早已不能满足实际需求.使用调试工具进行调试,成为开发中重要的方法.Bgfx 是一款跨平台.抽象封 ...
- OpenGL学习脚印: uniform blocks在着色器中的使用 转自https://blog.csdn.net/wangdingqiaoit/article/details/52717963
写在前面 目前,我们在着色器中要传递多个uniform变量时,总是使用多个uniform,然后在主程序中设置这些变量的值:同时如果要在多个shader之间共享变量,例如投影矩阵projection和视 ...
- unity中使用的着色器语言
在unity中,着色器编程使用了一列列的HLSL语言变种(也叫作Cg,但是大部分实际上两者都是一样的). 目前,为了在不同平台下保持最好的跨平台性, 取样贴图时,最好使用DX9风格 的HLSL. 着色 ...
- Direct3D 11 Tutorial 3: Shaders and Effect System_Direct3D 11 教程3:着色器和效果系统
概述 在上一个教程中,我们设置了一个顶点缓冲区并将一个三角形传递给GPU. 现在,我们将逐步完成图形管道并查看每个阶段的工作原理. 将解释着色器和效果系统的概念. 请注意,本教程与前一个源代码共享相同 ...
- Unity 几何着色器
Unity 几何着色器 shaderGeometry Shader几何着色器 Unity 几何着色器 如果学习不能带来价值,那将毫无意义 简介 在顶点和片段着色器之间有一个可选的着色器,叫做几 ...
- WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码
原文:WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码 HLSL,High Level Shader Language,高级着色器语言,是 Di ...
随机推荐
- zencart加大数据表字段长度
批量表产品名称过长导致被截断的情况,是由于产品名称超出了数据库表中字段设置的最大长度,下面通过修改数据库表字段长度来避免此类情况发生: ) ; ) ; ) ; ) ; ) ; ) ; ) ; ) ; ...
- java线程基础巩固---构造Thread对象你也许不知道的几件事
关于Thread的构造在JDK文档中如下: 之后会把上面所有的构造都会学习到,这次主要是去研究一下图上标红的默认构造,当然大家肯定对于它都有些不屑,这有啥可学的,不new一个然后start线程不就启动 ...
- django 模型层(orm)05
目录 配置测试脚本 django ORM基本操作 增删改查 Django 终端打印SQL语句 13条基本查询操作 双下滑线查询 表查询 建表 一对多字段数据的增删改查 多对多字段数据的增删改查 基于对 ...
- es6的Set结构
今天看了一下es6的文档,发现还是比较实用的,Set结构可以用来数组的去重哎 let arr = [1,3,6,3,1,9] let arr1 = new Set(arr) [...arr1]的值就是 ...
- git diff 以及解决代码冲突
我是使用一台电脑测试, 然后在本地电脑创建了两个工作目录.专门用来模拟两个人提交代码.假设a.b两个人.只使用一个master分支做测试, 没有建立其他的分支. 主要就是为了研究冲突的解决方式.感觉g ...
- eclipse简单构建maven工程
1.普通java工程 1)File->New->maven project 新建一个maven工程: 勾选上 Create a simple project:如果不勾选是利用插件生成:这里 ...
- 使用fiddler实现手机抓包
手机上无法直接查看网络请求数据,需要使用抓包工具.Fiddler是一个免费的web调试代理,可以用它实现记录.查看和调试手机终端和远程服务器之间的http/https通信. fiddler没有手机客户 ...
- ngx_http_auth_request_module 第三方认证
shell > vim /usr/local/nginx-1.10.2/conf/vhost/auth.conf # 这是第三方认证服务器,认证逻辑使用的 PHP 代码 server { lis ...
- zabbix监控远端主机
接着上一篇博客,zabbix监控搭建起来以后,怎么用来监控其他主机呢,这一篇就来简单讲一下,希望对大家有所帮助. 安装一些依赖包 [root@winter ~]# yum install curl c ...
- 使用Grizzy+Jersey搭建一个RESTful框架()报错Exception in thread "main" java.lang.AbstractMethodError: javax.ws.rs.core.UriBuilder.uri(Ljava/lang/String;)Ljavax/ws/rs/core/UriBuilder;
报错的类涉及UriBuilder,我搜索类发现, 这个类存在于两个包中,我在baidu的时候,也有人提到是jar包冲突,我就删除了 这个依赖,问题解决了. 环境搭建过程请见地址https://blog ...