JSFiddle - React, Tailwind, and code Playground

by bemuse

HTML

<script src="https://cdn.jsdelivr.net/npm/gpu.js@latest/dist/gpu-browser.min.js"></script>
<canvas id="canvas"></canvas>

CSS

canvas{
  position: absolute;
  width: 100vw;
  height: 100vh;
}

JavaScript

import * as THREE from 'https://threejs.org/build/three.module.js'

const canvas = document.querySelector('#canvas')
const renderer = new THREE.WebGLRenderer({canvas})

const row = 3
const col = 3
const vertex = `
	attribute vec2 coord;

  uniform sampler2D tPosition;
  uniform sampler2D tParam;
  uniform float cameraConstant;

  varying vec3 vColor;

  void main(){
    vec3 nPosition = position;

    vec4 tPos = texelFetch(tPosition, ivec2(coord), 0);
    vec4 tPrm = texelFetch(tParam, ivec2(coord), 0);

    nPosition.xy = tPos.xy;
    vec4 mvPosition = modelViewMatrix * vec4(nPosition, 1.0);

    gl_Position = projectionMatrix * modelViewMatrix * vec4(nPosition, 1.0);
    gl_PointSize = tPrm.x * cameraConstant / ( -mvPosition.z );

    vColor = tPrm.yzw;
  }
`

const geometry = new THREE.BufferGeometry()
geometry.setAttribute(
	'position',
  new THREE.BufferAttribute(new Float32Array(row * col * 3), 3)
)

const material = new ShaderMaterial({
	vertexShader: '',
  fragmentShader: '',
  transparent: true,
  uniforms: {
  	
  }
})