add solar

galaxy2/bundler/webpack.common.js

@@ -0,0 +1,97 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
+const path = require('path')
+
+module.exports = {
+    entry: path.resolve(__dirname, '../src/script.js'),
+    output:
+    {
+        filename: 'bundle.[contenthash].js',
+        path: path.resolve(__dirname, '../dist')
+    },
+    devtool: 'source-map',
+    plugins:
+    [
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: path.resolve(__dirname, '../static') }
+            ]
+        }),
+        new HtmlWebpackPlugin({
+            template: path.resolve(__dirname, '../src/index.html'),
+            minify: true
+        }),
+        new MiniCSSExtractPlugin()
+    ],
+    module:
+    {
+        rules:
+        [
+            // HTML
+            {
+                test: /\.(html)$/,
+                use: ['html-loader']
+            },
+
+            // JS
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use:
+                [
+                    'babel-loader'
+                ]
+            },
+
+            // CSS
+            {
+                test: /\.css$/,
+                use:
+                [
+                    MiniCSSExtractPlugin.loader,
+                    'css-loader'
+                ]
+            },
+
+            // Images
+            {
+                test: /\.(jpg|png|gif|svg)$/,
+                use:
+                [
+                    {
+                        loader: 'file-loader',
+                        options:
+                        {
+                            outputPath: 'assets/images/'
+                        }
+                    }
+                ]
+            },
+
+            // Fonts
+            {
+                test: /\.(ttf|eot|woff|woff2)$/,
+                use:
+                [
+                    {
+                        loader: 'file-loader',
+                        options:
+                        {
+                            outputPath: 'assets/fonts/'
+                        }
+                    }
+                ]
+            },
+
+            // Shaders
+            {
+                test: /\.(glsl|vs|fs|vert|frag)$/,
+                exclude: /node_modules/,
+                use: [
+                    'raw-loader'
+                ]
+            }
+        ]
+    }
+}

galaxy2/bundler/webpack.dev.js

@@ -0,0 +1,39 @@
+const { merge } = require('webpack-merge')
+const commonConfiguration = require('./webpack.common.js')
+const ip = require('internal-ip')
+const portFinderSync = require('portfinder-sync')
+
+const infoColor = (_message) =>
+{
+    return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
+}
+
+module.exports = merge(
+    commonConfiguration,
+    {
+        mode: 'development',
+        devServer:
+        {
+            host: '0.0.0.0',
+            port: portFinderSync.getPort(8080),
+            contentBase: './dist',
+            watchContentBase: true,
+            open: true,
+            https: false,
+            useLocalIp: true,
+            disableHostCheck: true,
+            overlay: true,
+            noInfo: true,
+            after: function(app, server, compiler)
+            {
+                const port = server.options.port
+                const https = server.options.https ? 's' : ''
+                const localIp = ip.v4.sync()
+                const domain1 = `http${https}://${localIp}:${port}`
+                const domain2 = `http${https}://localhost:${port}`
+                
+                console.log(`Project running at:\n  - ${infoColor(domain1)}\n  - ${infoColor(domain2)}`)
+            }
+        }
+    }
+)

galaxy2/bundler/webpack.prod.js

@@ -0,0 +1,14 @@
+const { merge } = require('webpack-merge')
+const commonConfiguration = require('./webpack.common.js')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = merge(
+    commonConfiguration,
+    {
+        mode: 'production',
+        plugins:
+        [
+            new CleanWebpackPlugin()
+        ]
+    }
+)

galaxy2/package.json

@@ -0,0 +1,28 @@
+{
+  "scripts": {
+    "build": "webpack --config ./bundler/webpack.prod.js",
+    "dev": "webpack serve --config ./bundler/webpack.dev.js"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^7.0.0",
+    "css-loader": "^5.0.1",
+    "dat.gui": "^0.7.7",
+    "file-loader": "^6.2.0",
+    "firebase-tools": "^9.10.2",
+    "html-loader": "^1.3.2",
+    "html-webpack-plugin": "^5.0.0-alpha.7",
+    "mini-css-extract-plugin": "^1.3.4",
+    "portfinder-sync": "0.0.2",
+    "raw-loader": "^4.0.2",
+    "style-loader": "^2.0.0",
+    "three": "^0.124.0",
+    "webpack": "^5.14.0",
+    "webpack-cli": "^4.3.1",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  }
+}

galaxy2/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ai/galaxy2</title>
+</head>
+<body>
+    <canvas class="webgl2"></canvas>
+</body>
+</html>

galaxy2/src/script.js

@@ -0,0 +1,197 @@
+import './style.css'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+//import * as dat from 'dat.gui'
+import vertexShader from './shaders/vertexShader.glsl'
+import fragmentShader from './shaders/fragmentShader.glsl'
+
+/**
+ * Base
+ */
+// Debug
+//const gui = new dat.GUI()
+
+// Canvas
+const canvas = document.querySelector('canvas.webgl2')
+
+// Scene
+const scene = new THREE.Scene()
+
+/**
+ * Galaxy
+ */
+const parameters = {}
+parameters.count = 200000
+parameters.size = 0.001
+parameters.radius = 3
+parameters.branches = 10
+parameters.spin = 1
+parameters.randomness = 0.5
+parameters.randomnessPower = 5
+parameters.insideColor = '#fff700'
+parameters.outsideColor = '#fff700'
+
+let geometry = null
+let material = null
+let points = null
+
+const generateGalaxy = () =>
+{
+    if(points !== null)
+    {
+        geometry.dispose()
+        material.dispose()
+        scene.remove(points)
+    }
+
+    /**
+     * Geometry
+     */
+    geometry = new THREE.BufferGeometry()
+
+    const positions = new Float32Array(parameters.count * 3)
+    const colors = new Float32Array(parameters.count * 3)
+    const scales = new Float32Array(parameters.count * 1)
+    const randomness = new Float32Array(parameters.count * 3)
+
+    const insideColor = new THREE.Color(parameters.insideColor)
+    const outsideColor = new THREE.Color(parameters.outsideColor)
+
+    for(let i = 0; i < parameters.count; i++)
+    {
+        const i3 = i * 3
+
+        // Position
+        const radius = Math.random() * parameters.radius
+
+        const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2
+
+        const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+        const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+        const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+        
+        positions[i3    ] = Math.cos(branchAngle) * radius + randomX
+        positions[i3 + 1] = randomY
+        positions[i3 + 2] = Math.sin(branchAngle) * radius + randomZ
+        
+        
+        randomness[i    ] = randomX
+        randomness[i + 1] = randomY
+        randomness[i + 2] = randomZ
+
+        // Color
+        const mixedColor = insideColor.clone()
+        mixedColor.lerp(outsideColor, radius / parameters.radius)
+
+        colors[i3    ] = mixedColor.r
+        colors[i3 + 1] = mixedColor.g
+        colors[i3 + 2] = mixedColor.b
+
+        scales[i] = Math.random()
+    }
+
+    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('aRandomness', new THREE.BufferAttribute(randomness, 3))
+
+    /**
+     * Material
+     */
+    material = new THREE.ShaderMaterial({
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        vertexColors: true,
+        vertexShader,
+        fragmentShader,
+        uniforms: {
+            uTime: { value: 0 },
+            uSize: { value: 20.0 * renderer.getPixelRatio() }
+        }
+    })
+
+    /**
+     * Points
+     */
+    points = new THREE.Points(geometry, material)
+    scene.add(points)
+	   scene.background = new THREE.Color( 0x313131 );
+}
+
+//gui.add(parameters, 'count').min(100).max(1000000).step(100).onFinishChange(generateGalaxy)
+//gui.add(parameters, 'radius').min(0.01).max(20).step(0.01).onFinishChange(generateGalaxy)
+//gui.add(parameters, 'branches').min(2).max(20).step(1).onFinishChange(generateGalaxy)
+//gui.add(parameters, 'randomness').min(0).max(2).step(0.001).onFinishChange(generateGalaxy)
+//gui.add(parameters, 'randomnessPower').min(1).max(10).step(0.001).onFinishChange(generateGalaxy)
+//gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy)
+//gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy)
+
+/**
+ * Sizes
+ */
+const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+}
+
+window.addEventListener('resize', () =>
+{
+    // Update sizes
+    sizes.width = window.innerWidth
+    sizes.height = window.innerHeight
+    
+    // Update camera
+    camera.aspect = sizes.width / sizes.height
+    camera.updateProjectionMatrix()
+    
+    // Update renderer
+    renderer.setSize(sizes.width, sizes.height)
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+})
+
+/**
+ * Camera
+ */
+// Base camera
+const camera = new THREE.PerspectiveCamera(100, sizes.width / sizes.height, 0.1, 100)
+camera.position.x = -5
+camera.position.y = 0
+camera.position.z = 0
+scene.add(camera)
+
+// Controls
+const controls = new OrbitControls(camera, canvas)
+controls.enableDamping = true
+
+/**
+ * Renderer
+ */
+const renderer = new THREE.WebGLRenderer({
+    canvas: canvas
+})
+renderer.setSize(sizes.width, sizes.height)
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 10))
+
+generateGalaxy()
+/**
+ * Animate
+ */
+const clock = new THREE.Clock()
+
+const tick = () =>
+{
+    const elapsedTime = clock.getElapsedTime()
+
+    material.uniforms.uTime.value = elapsedTime
+    
+    // Update controls
+    controls.update()
+    
+    // Render
+    renderer.render(scene, camera)
+    
+    // Call tick again on the next frame
+    window.requestAnimationFrame(tick)
+}
+
+tick()

galaxy2/src/shaders/fragmentShader.glsl

@@ -0,0 +1,19 @@
+varying vec3 vColor;
+
+void main(){
+
+    //Disc
+    // float strength = 1.0 - step(0.5, distance(gl_PointCoord, vec2(0.5)));
+
+    //Diffused point
+    // float strength = 1.0 - 2.0 * distance(gl_PointCoord, vec2(0.5));
+
+    //Light point
+    float strength = pow(1.0 - distance(gl_PointCoord, vec2(0.5)), 10.0);
+
+    //Color
+    vec3 color = mix(vec3(0.0), vColor, strength);
+
+    gl_FragColor = vec4(color, 1.0);
+
+}

galaxy2/src/shaders/vertexShader.glsl

@@ -0,0 +1,35 @@
+uniform float uSize;
+uniform float uTime;
+
+attribute float aScale;
+attribute vec3 aRandomness;
+
+varying vec3 vColor;
+
+void main(){
+
+    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+
+    //Spin
+    float angle = atan(modelPosition.x, modelPosition.z);
+    float distToCentre = length(modelPosition.xz);
+    float angleOffset = (1.0 / distToCentre) * uTime * 0.2;
+    angle += angleOffset;
+    modelPosition.x = cos(angle) * distToCentre;
+    modelPosition.z = sin(angle) * distToCentre;
+
+    //Randomness
+    modelPosition.x += aRandomness.x;
+    modelPosition.y += aRandomness.y;
+    modelPosition.z += aRandomness.z;
+
+    vec4 viewPosition = viewMatrix * modelPosition;
+    vec4 projectedPosition = projectionMatrix * viewPosition;
+
+    gl_Position = projectedPosition;
+    gl_PointSize = uSize * aScale;
+    gl_PointSize *= (1.0 / -viewPosition.z);
+
+    vColor = color;
+
+}

galaxy2/src/style.css

@@ -0,0 +1,19 @@
+*
+{
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body
+{
+    overflow: hidden;
+}
+
+.webgl
+{
+    position: fixed;
+    top: 0;
+    left: 0;
+    outline: none;
+}