Skip to content

Commit

Permalink
upo
Browse files Browse the repository at this point in the history
  • Loading branch information
@brandyvt95
brandyvt95 committed Nov 30, 2024
1 parent e644edf commit 6201ccf
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 0 deletions.
212 changes: 212 additions & 0 deletions DEPSE_particel.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/solution_depse/src/styles.css" />
</head>

<body>

<script type="importmap">
{
"imports": {
"three": "./three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">

import * as THREE from 'three';

import Stats from 'three/addons/stats.module.js';
import { GUI } from 'three/addons/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/OrbitControls.js';

import { GPUComputationRenderer } from 'three/addons/GPUComputationRenderer.js';
import virtualScroll from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
const parameters = { rockCustom: true, zoomControl: true };

let stats, controls
let posScroll = 0;
let targetPos = 0;
const scroller = new virtualScroll();

scroller.on((event) => {
targetPos = event.y;
});
stats = new Stats();
document.body.appendChild(stats.dom);


function lerp(start, end, t) {
return start * (1 - t) + end * t;
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2
const renderer = new THREE.WebGLRenderer();


class PointShader {
constructor(parameters) {
this.parameters = parameters
this.count = this.parameters.count
this.scene = this.parameters.scene
this.camera = this.parameters.camera
this.renderer = this.parameters.renderer

this.geometry = new THREE.BufferGeometry();
this.material = this.createShaderMaterial();
this.points = new THREE.Points(this.geometry, this.material);

this.scene.add(this.points);
this.createPoints();
}

createShaderMaterial() {
const vertexShader = `
varying vec3 uPos;
varying vec3 uExtra;
attribute vec3 extra;
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
uPos = position;
uExtra = extra;
gl_PointSize = 5.0;
}
`;

// Fragment Shader
const fragmentShader = `
varying vec3 uPos;
varying vec3 uExtra;
vec4 pointRand(vec2 st, float random, vec3 color, int type, vec3 randomAttIn) {
float cir = distance(st, vec2(0.5)) - .001;
if(type == 0) {
float randClamp = mix(0., 0.005, random);
float diffcir = smoothstep(-0.008, 0.020, cir);
cir = smoothstep(0.0 + randClamp, 0.036, cir);
vec4 rls = vec4(vec3(1.-cir + 1.-diffcir), max(.1, randomAttIn.x - .2)) * vec4(0.4, 0.6, 1.0, 1.);
return rls;
}
else if(type == 1) {
float alpha = random;
float randClamp = mix(-.02, -0.01, random);
float randBLur = mix(.01, .06, random);
float randAlpha = mix(0.03, 0.08, 1.-random);
cir = smoothstep(0.026, 0.050 + (randBLur), cir - randClamp);
vec4 rls = vec4(vec3(1.-cir), randAlpha ) * vec4(1.);
return rls;
}
else if(type == 2) {
float randClamp = mix(0., 0.008, random);
float randAlpha = mix(0.4, 0.7, random);
cir = smoothstep(0.0, 0.036+ randClamp, cir);
vec4 rls = vec4(vec3(1.-cir), randAlpha) * vec4(1.);
return rls;
}
else if(type == 3) {
float randClamp = mix(-0.1, 0.1, random);
cir = smoothstep(0.0, 0.042, cir);
vec4 rls = vec4(vec3(1.-cir), max(.1, randomAttIn.x - .3)) * vec4(0.3, 0.6, 0.8, 1.);
return rls;
}
else if(type == 4) {
float alpha = random;
float randClamp = mix(-.02, 0.05, random);
float randBLur = mix(.01, .06, random);
float randAlpha = mix(0.01, 0.017, 1.-random);
cir = smoothstep(0.026, 0.050 + (randBLur), cir - randClamp);
vec4 rls = vec4(vec3(1.-cir), randAlpha ) * vec4(1.);
return rls;
}
}
void main() {
vec3 aqua = vec3(0.3, 0.6, 0.8);
vec3 blue = vec3(0.4, 0.6, 1.0);
vec3 deepPurple = vec3(0.1, 0.2, 0.5);
highp int ID = int(uExtra.y) * 30;
vec4 rlsOut = pointRand(uPos.xy, uExtra.x, deepPurple, ID, uExtra);
vec4 outRls = vec4(1.);
outRls *= rlsOut;
gl_FragColor = outRls;
}
`;

return new THREE.ShaderMaterial({
vertexShader,
fragmentShader,
uniforms: {
},

});
}

createPoints() {
const positions = [];
const extra = []

for (let i = 0; i < this.count; i++) {
const x = Math.random()
const y = Math.random()
const z = Math.random()
positions.push(x, y, z);
}
for (let i = 0; i < this.count; i++) {
const x = Math.random()
const y = Math.random()
const z = Math.random()
extra.push(x, y, z);
}
this.geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
this.geometry.setAttribute('extra', new THREE.Float32BufferAttribute(positions, 3));
}

updateUniform({ name, value }) {

}
render() {
this.renderer.render(this.scene, this.camera);
}
}



renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const pointShader = new PointShader({
scene: scene,
camera: camera,
renderer: renderer,

count: 1000
});
controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = true;
controls.dampingFactor = 0.125;

function updateUtils() {
posScroll = lerp(posScroll, targetPos, 0.075);

stats.update();
controls?.update();
}
function animate(time) {
updateUtils()
requestAnimationFrame(animate);
pointShader.render();
}

animate();

</script>
</body>

</html>
0 solution_depse.html → DEPSE_rockclone.html
View file
File renamed without changes.

0 comments on commit 6201ccf

Please sign in to comment.