ThreeJS
文章平均质量分 79
布谷的鸟
冰冻三尺非一日之寒
展开
-
ThreeJS离屏渲染介绍和运用
一.定义帧缓冲区对象 可以用来代替颜色缓冲区或深度缓冲区。绘制在帧缓冲区的对象并不会直接显示在canvas上,你可以先对帧缓冲区的内容进行一些处理再显示,或者直接用其中的内容作为纹理图像。在帧缓冲区中进行绘制的过程又称为离屏绘制 。(以上摘自<<WebGL编程指南>>)而ThreeJS中的WebGLRenderTarget就是对这个自定义帧缓冲区的封装,这一技术的经典应用就是我们常听到的"屏幕后处理"二.封装和简单用法来看一下WebGLRenderTarget的封装fun原创 2022-03-24 11:44:57 · 2224 阅读 · 1 评论 -
WebGL动画之如何变成狗
一.前言一如标题,如何变成狗?当然这里不是指的物种的变换或者是变成单身狗。看如下动画:二.分析与思考从上面的动画分析看,开头像液体球一样融合的动画很明显是前面文章中解析过的Metaball元球融合原理,不清楚的可以跳转去先看下解析。Metaball元球在视觉上的融合会给人一种多变,柔性转变的效果,所以这里用作变形恰到好处,但问题是如何变成狗呢?需要将元球摆放成狗的形状或是用像素拼成狗吗?如果是这样那就还需要狗的像素矩阵才行,未免太过于繁琐。再仔细观察动画,metaball液体分散消失时,像素并没有原创 2022-03-03 09:24:16 · 519 阅读 · 0 评论 -
图形学中的噪声
一.噪声定义大理石表面的花纹、流沙、水墨画、山脉起伏、光照的海面等,这些纹理不可预测性叫随机,但是这种随机又不同于我们常规程序中用到的随机。计算机中用机器来绘制这些图就会运用到噪声,噪声可以定义为一个随机数生成器 ;但是这种随机是有规律的随机,看似杂乱无章实则有序,因此可以构造一些丰富逼真的图片。二.噪声的生成一维使用noisefloat rand (in float _x) { return fract(sin(_x)*1e4);}float i = floor(x); /原创 2022-03-01 11:23:37 · 1090 阅读 · 0 评论 -
图片水波效果
如上动画,类似动画中的水波效果在生活很常见,在计算机中这类视觉特效常用于海浪,水波,旗帜飘动等。本文这里对水波的简单实现做一下讲解,动画开始的水泡是用Metaball来实现的,之前文章有解析过这里不在讲解。一.分析从动画上来看,我们可以很清除的看到,这种水波的运动可以看作是像素的位移,但这种位移不同于日常中的位移,日常中或计算机中的位移属于整体位移即通常是平移,但该动画中明显每个像素的偏移都不一样或者说周期性的偏移,理解到这一点我们实现的原理就非常容易了。方法一.直接在顶点着色器中改变顶点位置方法.原创 2022-02-28 09:15:30 · 508 阅读 · 0 评论 -
雾效在自定义Shader中的运用
一.介绍Three.js中的Fog雾在生活场景中的使用其实非常广泛,比如我们去看秋天的晨雾,公路的尽头,远处的海面时,远处的景色总是要模糊一些不如近景那么清晰那么亮,这将在计算机中怎么表现呢?然后就衍生处了Fog这个类。Fog这个类包含定义线性雾的参数,也就是说,密度随着距离的增加呈线性增长构造器Fog(hex, near, far)这个hex参数被传递给 Color 构造函数来设置颜色属性。hex是一个十六进制整数或CSS样式的字符串属性cocol雾的颜色。比如:如何设置为黑色,远处的物体将原创 2022-02-25 10:28:57 · 670 阅读 · 0 评论 -
圆形的绘制和随机变化
一.前言除了矩形,圆形在实际的图形运用中也比较广泛。例如水波或光圈效果;若是用最基础的webgl理论来讲,我们都知道圆属于多边形的绘制,可以通过绘制圆上的各点,再将其连接起来通过gl.drawArrays方法,传入gl.TRIANGLE_FAN来进行绘制。今天我们介绍Three.js的绘制方法。二.绘制原理其实在three.js中,是有CircleGeometry圆几何体类的,我们可以很轻松的new一个来创建一个圆形平面,然后填充材质即可得到圆形的图案。那我们为什么要自己来绘制呢,原因很简单,自定义的原创 2022-02-23 10:13:09 · 697 阅读 · 0 评论 -
Metaballs解析与运用(2D元球融合)
一.Metaball定义Metaball(元球)技术是由Blinn于1982年开发一种适用于建立可变形表面的技术。此技术利用Metaball建立能量场,然后通过标量域的等势面来建立3D模型来表现软体或者隐式曲面。简单的说,就是在空间里布置一些Metaball,每个Metaball都有一个能量场,通常用势函数来表示。设空间里均布着无数个点。在其中某一点,它的能量为每个Metaball对它的势的叠加。然后在空间的所有点找出势能相同的点,就得到一个由这些点组成的曲面。二.对Metaball的理解metaba原创 2022-02-21 10:12:09 · 2054 阅读 · 0 评论 -
3D星空隧道效果
主要运用TubeGeometry来制作自定义的隧道效果1.初始化场景function init(){ //创建 WebGL renderer var canvas = document.querySelector("canvas"); renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, shadowMapEnabled: true, shadowMapType: THRE.原创 2022-02-18 09:12:46 · 686 阅读 · 0 评论