用 three.js 畫個太陽
前言
你們好，這裏是 CSS 魔法使——alphardex。markdown
本文咱們將用three.js來模擬出太陽的動畫效果，如下是最終實現的效果圖app
讓咱們開始吧！less
準備工做
筆者的three.js模板：點擊右下角的fork便可複製一份ide
畫太陽
離屏渲染
實現太陽的主要思路以下：函數
- 建立噪聲（本文選了
simplex noise做爲噪聲） - 將噪聲做爲Cube貼圖渲染在球體上
- 給球體的貼圖進行多重採樣，模擬太陽運動的效果
- 建立一個漸變輻射，做爲太陽外圍的環
class Sun extends Base {
constructor(sel: string, debug: boolean) {
super(sel, debug);
this.clock = new THREE.Clock();
this.cameraPosition = new THREE.Vector3(0, 0, 2);
}
// 初始化
init() {
this.createScene();
this.createPerspectiveCamera();
this.createRenderer();
this.createSunNoiseMaterial();
this.createCubeRt();
this.createSunShapeMaterial();
this.createSun();
this.createSunRingMaterial();
this.createSunRing();
this.createLight();
this.trackMousePos();
this.createOrbitControls();
this.addListeners();
this.setLoop();
}
// 建立噪聲材質
createSunNoiseMaterial() {
const sunNoiseMaterial = new THREE.ShaderMaterial({
vertexShader: sunNoiseVertexShader,
fragmentShader: sunNoiseFragmentShader,
side: THREE.DoubleSide,
uniforms: {
uTime: {
value: 0
},
uMouse: {
value: new THREE.Vector2(0, 0)
},
uResolution: {
value: new THREE.Vector2(window.innerWidth, window.innerHeight)
}
}
});
this.sunNoiseMaterial = sunNoiseMaterial;
}
// 建立立方體離屏渲染目標，將其做爲太陽本體的噪聲貼圖
createCubeRt() {
const cubeRt = new THREE.WebGLCubeRenderTarget(256);
this.cubeRt = cubeRt;
const cubeCamera = new THREE.CubeCamera(0.1, 10, cubeRt);
this.cubeCamera = cubeCamera;
const cubeScene = new THREE.Scene();
const geometry = new THREE.SphereBufferGeometry(1, 100, 100);
const material = this.sunNoiseMaterial;
this.createMesh(
{
geometry,
material
},
cubeScene
);
this.cubeScene = cubeScene;
}
// 建立太陽本體材質
createSunShapeMaterial() {
const sunShapeMaterial = new THREE.ShaderMaterial({
vertexShader: sunShapeVertexShader,
fragmentShader: sunShapeFragmentShader,
side: THREE.DoubleSide,
uniforms: {
uTime: {
value: 0
},
uMouse: {
value: new THREE.Vector2(0, 0)
},
uResolution: {
value: new THREE.Vector2(window.innerWidth, window.innerHeight)
},
uNoiseTexture: {
value: null
},
uVelocity: {
value: 0.05
},
uBrightness: {
value: 0.33
},
uStagger: {
value: 16
}
}
});
this.sunShapeMaterial = sunShapeMaterial;
}
// 建立太陽
createSun() {
const geometry = new THREE.SphereBufferGeometry(1, 100, 100);
const material = this.sunShapeMaterial;
this.createMesh({
geometry,
material
});
}
// 建立太陽環材質
createSunRingMaterial() {
const sunRingMaterial = new THREE.ShaderMaterial({
vertexShader: sunRingVertexShader,
fragmentShader: sunRingFragmentShader,
side: THREE.BackSide,
uniforms: {
uTime: {
value: 0
},
uMouse: {
value: new THREE.Vector2(0, 0)
},
uResolution: {
value: new THREE.Vector2(window.innerWidth, window.innerHeight)
}
}
});
this.sunRingMaterial = sunRingMaterial;
}
// 建立太陽環
createSunRing() {
const geometry = new THREE.SphereBufferGeometry(1.2, 100, 100);
const material = this.sunRingMaterial;
this.createMesh({
geometry,
material
});
}
// 動畫
update() {
const elapsedTime = this.clock.getElapsedTime();
const mousePos = this.mousePos;
if (this.sunNoiseMaterial && this.sunShapeMaterial) {
this.cubeCamera.update(this.renderer, this.cubeScene);
this.sunNoiseMaterial.uniforms.uTime.value = elapsedTime;
this.sunNoiseMaterial.uniforms.uMouse.value = mousePos;
this.sunShapeMaterial.uniforms.uTime.value = elapsedTime;
this.sunShapeMaterial.uniforms.uMouse.value = mousePos;
this.sunShapeMaterial.uniforms.uNoiseTexture.value = this.cubeRt.texture;
this.sunRingMaterial.uniforms.uTime.value = elapsedTime;
this.sunRingMaterial.uniforms.uMouse.value = mousePos;
}
}
}
複製代碼
作好離屏渲染的準備工做後，能夠開始本文的重點——着色器了。oop
噪聲着色器
頂點
跟模板相同，略動畫
片元
採用了噪聲，結合了分形布朗運動fbm來實現噪聲動畫ui
分形布朗運動的本質是經過循環來升高噪聲的頻率並下降噪聲的振幅this
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0; }
float mod289(float x) {
return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
float permute(float x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float taylorInvSqrt(float r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
vec4 grad4(float j, vec4 ip)
{
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;
p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
s = vec4(lessThan(p, vec4(0.0)));
p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
return p;
}
// (sqrt(5) - 1)/4 = F4, used once below
#define F4 0.309016994374947451
float snoise(vec4 v)
{
const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4
0.276393202250021, // 2 * G4
0.414589803375032, // 3 * G4
-0.447213595499958); // -1 + 4 * G4
// First corner
vec4 i = floor(v + dot(v, vec4(F4)) );
vec4 x0 = v - i + dot(i, C.xxxx);
// Other corners
// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
vec4 i0;
vec3 isX = step( x0.yzw, x0.xxx );
vec3 isYZ = step( x0.zww, x0.yyz );
// i0.x = dot( isX, vec3( 1.0 ) );
i0.x = isX.x + isX.y + isX.z;
i0.yzw = 1.0 - isX;
// i0.y += dot( isYZ.xy, vec2( 1.0 ) );
i0.y += isYZ.x + isYZ.y;
i0.zw += 1.0 - isYZ.xy;
i0.z += isYZ.z;
i0.w += 1.0 - isYZ.z;
// i0 now contains the unique values 0,1,2,3 in each channel
vec4 i3 = clamp( i0, 0.0, 1.0 );
vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
// x0 = x0 - 0.0 + 0.0 * C.xxxx
// x1 = x0 - i1 + 1.0 * C.xxxx
// x2 = x0 - i2 + 2.0 * C.xxxx
// x3 = x0 - i3 + 3.0 * C.xxxx
// x4 = x0 - 1.0 + 4.0 * C.xxxx
vec4 x1 = x0 - i1 + C.xxxx;
vec4 x2 = x0 - i2 + C.yyyy;
vec4 x3 = x0 - i3 + C.zzzz;
vec4 x4 = x0 + C.wwww;
// Permutations
i = mod289(i);
float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
vec4 j1 = permute( permute( permute( permute (
i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
// Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope
// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
vec4 p0 = grad4(j0, ip);
vec4 p1 = grad4(j1.x, ip);
vec4 p2 = grad4(j1.y, ip);
vec4 p3 = grad4(j1.z, ip);
vec4 p4 = grad4(j1.w, ip);
// Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
p4 *= taylorInvSqrt(dot(p4,p4));
// Mix contributions from the five corners
vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);
m0 = m0 * m0;
m1 = m1 * m1;
return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
}
#define OCTAVES 6
uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;
varying vec2 vUv;
varying vec3 vPosition;
float fbm4d(vec4 p){
float sum=0.;
float amp=1.;
float scale=1.;
for(int i=0;i<OCTAVES;i++){
sum+=snoise(p*scale)*amp;
p.w+=100.;
amp*=.9;
scale*=2.;
}
return sum;
}
void main(){
vec4 p=vec4(vPosition*4.,uTime*.025);
float noise=fbm4d(p);
vec4 p1=vec4(vPosition*2.,uTime*.25);
float spot=max(snoise(p1),0.);
vec4 color=vec4(noise);
color*=mix(1.,spot,.7);
gl_FragColor=color;
}
複製代碼
本體着色器
頂點
建立了3個運動層（分別沿着xy、xz和yz軸旋轉），爲片元的多重採樣提供位置基礎spa
mat2 rotation2d(float angle) {
float s = sin(angle);
float c = cos(angle);
return mat2(
c, -s,
s, c
);
}
mat4 rotation3d(vec3 axis, float angle) {
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat4(
oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,
0.0, 0.0, 0.0, 1.0
);
}
vec2 rotate(vec2 v, float angle) {
return rotation2d(angle) * v;
}
vec3 rotate(vec3 v, vec3 axis, float angle) {
return (rotation3d(axis, angle) * vec4(v, 1.0)).xyz;
}
// https://tympanus.net/codrops/2019/10/29/real-time-multiside-refraction-in-three-steps/
vec3 getEyeVector(mat4 modelMat,vec3 pos,vec3 camPos){
vec4 worldPosition=modelMat*vec4(pos,1.);
vec3 eyeVector=normalize(worldPosition.xyz-camPos);
return eyeVector;
}
const float HALF_PI=1.570796327;
uniform float uTime;
uniform float uVelocity;
uniform float uStagger;
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vLayer1;
varying vec3 vLayer2;
varying vec3 vLayer3;
varying vec3 vNormal;
varying vec3 vEyeVector;
void main(){
vec4 modelPosition=modelMatrix*vec4(position,1.);
vec4 viewPosition=viewMatrix*modelPosition;
vec4 projectedPosition=projectionMatrix*viewPosition;
gl_Position=projectedPosition;
vec3 pos=position;
float displacement1=uVelocity*uTime;
float displacement2=uVelocity*(uTime*1.5+uStagger*1.);
float displacement3=uVelocity*(uTime*2.+uStagger*2.);
vec3 xy=vec3(1.,1.,0.);
vec3 xz=vec3(1.,0.,1.);
vec3 yz=vec3(0.,1.,1.);
vec3 layer1=rotate(pos,xy,displacement1);
vec3 layer2=rotate(pos,xz,displacement2);
vec3 layer3=rotate(pos,yz,displacement3);
vUv=uv;
vPosition=position;
vLayer1=layer1;
vLayer2=layer2;
vLayer3=layer3;
vNormal=normal;
vEyeVector=getEyeVector(modelMatrix,position,cameraPosition);
}
複製代碼
片元
對噪聲貼圖進行多重採樣，並應用菲涅爾反射公式造成光的效果
firePalette函數是筆者以前逛shadertoy時看到的一種模擬火焰顏色的函數，以爲不錯就直接拿來用了
// https://www.shadertoy.com/view/4scSW4
float fresnel(float bias,float scale,float power,vec3 I,vec3 N)
{
return bias+scale*pow(1.+dot(I,N),power);
}
// https://www.shadertoy.com/view/XlSSzK
vec3 firePalette(float i){
float T=1400.+1300.*i;// Temperature range (in Kelvin).
vec3 L=vec3(7.4,5.6,4.4);// Red, green, blue wavelengths (in hundreds of nanometers).
L=pow(L,vec3(5.))*(exp(1.43876719683e5/(T*L))-1.);
return 1.-exp(-5e8/L);// Exposure level. Set to "50." For "70," change the "5" to a "7," etc.
}
uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;
uniform samplerCube uNoiseTexture;
uniform float uBrightness;
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vLayer1;
varying vec3 vLayer2;
varying vec3 vLayer3;
varying vec3 vNormal;
varying vec3 vEyeVector;
float layerSum(){
float sum=0.;
sum+=textureCube(uNoiseTexture,vLayer1).r;
sum+=textureCube(uNoiseTexture,vLayer2).r;
sum+=textureCube(uNoiseTexture,vLayer3).r;
sum*=uBrightness;
return sum;
}
void main(){
float brightness=layerSum();
brightness=4.*brightness+1.;
float F=fresnel(0.,1.,2.,vEyeVector,vNormal);
brightness+=F;
brightness*=.5;
vec4 color=vec4(firePalette(brightness),1.);
gl_FragColor=color;
}
複製代碼
太陽的本體完成了，接下來來實現它外層的那圈光環
外環着色器
頂點
跟模板相同，略
片元
建立一層輻射漸變，並應用火焰的顏色便可
float invert(float n){
return 1.-n;
}
vec3 invert(vec3 n){
return 1.-n;
}
// https://www.shadertoy.com/view/XlSSzK
vec3 firePalette(float i){
float T=1400.+1300.*i;// Temperature range (in Kelvin).
vec3 L=vec3(7.4,5.6,4.4);// Red, green, blue wavelengths (in hundreds of nanometers).
L=pow(L,vec3(5.))*(exp(1.43876719683e5/(T*L))-1.);
return 1.-exp(-5e8/L);// Exposure level. Set to "50." For "70," change the "5" to a "7," etc.
}
uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;
varying vec2 vUv;
varying vec3 vPosition;
void main(){
float radial=invert(vPosition.z);
radial=pow(radial,3.);
float brightness=(1.+radial*.83)*radial*.4;
vec3 ringColor=firePalette(brightness);
vec4 color=vec4(ringColor,radial);
gl_FragColor=color;
}
複製代碼
Long may the sunshine.
項目地址
相關文章
- 1. three.js 製做太陽系統
- 2. 使用canvas畫個太陽系
- 3. three.js實現土星繞太陽體系
- 4. 【three.js練習程序】建立太陽系
- 5. 太陽
- 6. 15.5.4 創建太陽系的動畫
- 7. 10.4.3 編程實例－太陽系動畫
- 8. 太陽升起 太陽落下
- 9. Three.js實現太陽系八大行星的自轉公轉
- 10. three.js模擬實現太陽系行星體系
- 更多相關文章...
- • PHP imagecharup - 垂直地畫一個字符 - PHP參考手冊
- • ionic 加載動畫 - ionic 教程
- • Composer 安裝與使用
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. three.js 製做太陽系統
- 2. 使用canvas畫個太陽系
- 3. three.js實現土星繞太陽體系
- 4. 【three.js練習程序】建立太陽系
- 5. 太陽
- 6. 15.5.4 創建太陽系的動畫
- 7. 10.4.3 編程實例－太陽系動畫
- 8. 太陽升起 太陽落下
- 9. Three.js實現太陽系八大行星的自轉公轉
- 10. three.js模擬實現太陽系行星體系