高端平面设计作品网站,wordpress 图片跳转,网络推广策划案例,房产网站开发方案着色器材质内置变量
three.js着色器的内置变量#xff0c;分别是
gl_PointSize#xff1a;在点渲染模式中#xff0c;控制方形点区域渲染像素大小#xff08;注意这里是像素大小#xff0c;而不是three.js单位#xff0c;因此在移动相机是#xff0c;所看到该点在屏幕…
着色器材质内置变量
three.js着色器的内置变量分别是
gl_PointSize在点渲染模式中控制方形点区域渲染像素大小注意这里是像素大小而不是three.js单位因此在移动相机是所看到该点在屏幕中的大小不变gl_Position控制顶点选完的位置gl_FragColor片元的RGB颜色值gl_FragCoord片元的坐标同样是以像素为单位gl_PointCoord在点渲染模式中对应方形像素坐标
他们或者单个出现在着色器中或者组团出现在着色器中是着色器的灵魂。下面来分别说一说他们的意义和用法。
gl_PointSize
gl_PointSize内置变量是一个float类型在点渲染模式中顶点由于是一个点理论上我们并无法看到所以他是以一个正对着相机的正方形面表现的。使用内置变量gl_PointSize主要是用来设置顶点渲染出来的正方形面的相素大小默认值是0。
void main() { gl_PointSize 10.0 }gl_Position
gl_Position内置变量是一个vec4类型它表示最终传入片元着色器片元化要使用的顶点位置坐标。vec4(x,y,z,1.0),前三个参数表示顶点的xyz坐标值第四个参数是浮点数1.0。
void main() { gl_Position projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }gl_FragColor
gl_FragColor内置变量是vec4类型主要用来设置片元像素的颜色它的前三个参数表示片元像素颜色值RGB第四个参数 是片元像素透明度A1.0表示不透明,0.0表示完全透明。
void main() { gl_FragColor vec4(1.0,0.0,0.0,1.0); }gl_FragCoord
gl_FragCoord内置变量是vec2类型它表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标坐标原点是canvas画布的左上角x轴水平向右y竖直向下gl_FragCoord坐标的单位是像素gl_FragCoord的值是vec2(x,y),通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。这里借了一张图 下面我们举个例子
fragmentShader: void main() {if(gl_FragCoord.x 600.0) {gl_FragColor vec4(1.0,0.0,0.0,1.0);} else {gl_FragColor vec4(1.0,1.0,0.0,1.0);}}这里以600像素为分界x值小于600像素的部分材质被渲染成红色大于的部分为黄色。
gl_PointCoord
gl_PointCoord内置变量也是vec2类型同样表示像素的坐标但是与gl_FragCoord不同的是gl_FragCoord是按照整个canvas算的x值从[0,宽度]y值是从[0,高度]。而gl_PointCoord是在点渲染模式中生效的而它的范围是对应小正方形面同样是左上角[0,0]到右下角[1,1]。
内置变量练习
五个内置变量我们都大致的说了一遍下面用一个小案例来试用一下除了gl_FragCoord的其他四个。先上图 var planeGeom new THREE.PlaneGeometry(1000, 1000, 100, 100);
uniforms {time: {value: 0}
}
var planeMate new THREE.ShaderMaterial({transparent: true,side: THREE.DoubleSide,uniforms: uniforms,vertexShader: uniform float time;void main() {float y sin(position.x / 50.0 time) * 10.0 sin(position.y / 50.0 time) * 10.0;vec3 newPosition vec3(position.x, position.y, y * 2.0 );gl_PointSize (y 20.0) / 4.0;gl_Position projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );},fragmentShader: void main() {float r distance(gl_PointCoord, vec2(0.5, 0.5));if(r 0.5) {gl_FragColor vec4(0.0,1.0,1.0,1.0);}}
})
var planeMesh new THREE.Points(planeGeom, planeMate);
planeMesh.rotation.x - Math.PI / 2;
scene.add(planeMesh);案例-星云 src/main/main.js
import * as THREE from three;import { OrbitControls } from three/examples/jsm/controls/OrbitControls;
import fragmentShader from ../shader/basic/fragmentShader.glsl;
import vertexShader from ../shader/basic/vertexShader.glsl;
// 目标打造一个旋转的银河系
// 初始化场景
const scene new THREE.Scene();// 创建透视相机
const camera new THREE.PerspectiveCamera(75,window.innerHeight / window.innerHeight,0.1,1000
);
// 设置相机位置
// object3d具有position属性是1个3维的向量
camera.aspect window.innerWidth / window.innerHeight;
// 更新摄像机的投影矩阵
camera.updateProjectionMatrix();
camera.position.set(0, 0, 5);
scene.add(camera);// 加入辅助轴帮助我们查看3维坐标轴
const axesHelper new THREE.AxesHelper(5);
scene.add(axesHelper);// 导入纹理
const textureLoader new THREE.TextureLoader();
const texture textureLoader.load(textures/particles/10.png);
const texture1 textureLoader.load(textures/particles/9.png);
const texture2 textureLoader.load(textures/particles/11.png);let geometrynull;
let pointsnull;// 设置星系的参数
const params {count: 1000,size: 0.1,radius: 5,branches: 4,spin: 0.5,color: #ff6030,outColor: #1b3984,
};// GalaxyColor
let galaxyColor new THREE.Color(params.color);
let outGalaxyColor new THREE.Color(params.outColor);
let material;
const generateGalaxy () {// 如果已经存在这些顶点那么先释放内存在删除顶点数据if (points ! null) {geometry.dispose();material.dispose();scene.remove(points);}// 生成顶点几何geometry new THREE.BufferGeometry();// 随机生成位置const positions new Float32Array(params.count * 3);const colors new Float32Array(params.count * 3);const scales new Float32Array(params.count);//图案属性const imgIndex new Float32Array(params.count)// 循环生成点for (let i 0; i params.count; i) {const current i * 3;// 计算分支的角度 (计算当前的点在第几个分支)*(2*Math.PI/多少个分支)const branchAngel (i % params.branches) * ((2 * Math.PI) / params.branches);const radius Math.random() * params.radius;// 距离圆心越远旋转的度数就越大// const spinAngle radius * params.spin;// 随机设置x/y/z偏移值const randomX Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;const randomY Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;const randomZ Math.pow(Math.random() * 2 - 1, 3) * 0.5 * (params.radius - radius) * 0.3;// 设置当前点x值坐标positions[current] Math.cos(branchAngel) * radius randomX;// 设置当前点y值坐标positions[current 1] randomY;// 设置当前点z值坐标positions[current 2] Math.sin(branchAngel) * radius randomZ;const mixColor galaxyColor.clone();mixColor.lerp(outGalaxyColor, radius / params.radius);// 设置颜色colors[current] mixColor.r;colors[current 1] mixColor.g;colors[current 2] mixColor.b;// 顶点的大小scales[current] Math.random();// 根据索引值设置不同的图案imgIndex[current] i%3 ;}geometry.setAttribute(position, new THREE.BufferAttribute(positions, 3));geometry.setAttribute(color, new THREE.BufferAttribute(colors, 3));geometry.setAttribute(aScale, new THREE.BufferAttribute(scales, 1));geometry.setAttribute(imgIndex, new THREE.BufferAttribute(imgIndex, 1));// 设置点的着色器材质material new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,transparent: true,vertexColors: true,blending: THREE.AdditiveBlending,depthWrite: false,uniforms: {uTime: {value: 0,},uTexture:{value:texture},uTexture1:{value:texture1},uTexture2:{value:texture2},uTime:{value:0},uColor:{value:galaxyColor}},});// 生成点points new THREE.Points(geometry, material);scene.add(points);console.log(points);// console.log(123);
};generateGalaxy()// 初始化渲染器
const renderer new THREE.WebGLRenderer();
renderer.shadowMap.enabled true;// 设置渲染尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);// 监听屏幕大小改变的变化设置渲染的尺寸
window.addEventListener(resize, () {// console.log(resize);// 更新摄像头camera.aspect window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比例renderer.setPixelRatio(window.devicePixelRatio);
});// 将渲染器添加到body
document.body.appendChild(renderer.domElement);// 初始化控制器
const controls new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼
controls.enableDamping true;
// // 设置自动旋转
// controls.autoRotate true;const clock new THREE.Clock();function animate(t) {// controls.update();const elapsedTime clock.getElapsedTime();material.uniforms.uTime.value elapsedTime;requestAnimationFrame(animate);// 使用渲染器渲染相机看这个场景的内容渲染出来renderer.render(scene, camera);
}animate();
src/shader/basic/fragmentShader.glsl
varying vec2 vUv;uniform sampler2D uTexture;
uniform sampler2D uTexture1;
uniform sampler2D uTexture2;
varying float vImgIndex;
varying vec3 vColor;
void main(){// gl_FragColor vec4(gl_PointCoord,0.0,1.0);// 设置渐变圆// float strength distance(gl_PointCoord,vec2(0.5)); // 点到中心距离// strength*2.0;// strength 1.0-strength;// gl_FragColor vec4(strength);// 圆形点// float strength 1.0-distance(gl_PointCoord,vec2(0.5));// strength step(0.5,strength);// gl_FragColor vec4(strength);// 根据纹理设置图案// vec4 textureColor texture2D(uTexture,gl_PointCoord);// gl_FragColor vec4(textureColor.rgb,textureColor.r) ;vec4 textureColor;if(vImgIndex0.0){textureColor texture2D(uTexture,gl_PointCoord);}else if(vImgIndex1.0){textureColor texture2D(uTexture1,gl_PointCoord);}else{textureColor texture2D(uTexture2,gl_PointCoord);}gl_FragColor vec4(vColor,textureColor.r) ;}src/shader/basic/vertexShader.glsl varying vec2 vUv;attribute float imgIndex;
attribute float aScale;
varying float vImgIndex;uniform float uTime;varying vec3 vColor;
void main(){vec4 modelPosition modelMatrix * vec4( position, 1.0 );// 获取定点的角度float angle atan(modelPosition.x,modelPosition.z);// 获取顶点到中心的距离float distanceToCenter length(modelPosition.xz);// 根据顶点到中心的距离设置旋转偏移度数float angleOffset 1.0/distanceToCenter*uTime;// 目前旋转的度数angleangleOffset;modelPosition.x cos(angle)*distanceToCenter;modelPosition.z sin(angle)*distanceToCenter;vec4 viewPosition viewMatrix*modelPosition;gl_Position projectionMatrix * viewPosition;// 设置点的大小// gl_PointSize 100.0; // 点的大小// 根据viewPosition的z坐标决定是否原理摄像机gl_PointSize 200.0/-viewPosition.z*aScale; // 点的大小vUv uv;vImgIndeximgIndex;vColor color;
}
