procedural art

basic use of procedural shaders with not attributes

by sjpt

HTML

<div style="z-index:999; position:absolute; left: 0em; background-color: white; opacity: 80%; overflow: auto">
mstack<input type="range" min="0" max="2" value="1" step="0.01"
    oninput="uniforms.mstack.value=this.value"/><br>
mtwist<input type="range" min="-1800" max="1800" value="-720" step="1"
    oninput="uniforms.mtwist.value=this.value"/><br>
mtwistOff<input type="range" min="0" max="0.1" value="0.03" step="0.001"
    oninput="uniforms.mtwistOff.value=this.value"/><br>
mbend<input type="range" min="0" max="180" value="30" step="1"
    oninput="uniforms.mbend.value=this.value"/><br>

sstack<input type="range" min="0" max="1" value="0.6" step="0.01"
    oninput="uniforms.sstack.value=this.value"/><br>
stwist<input type="range" min="-1800" max="1800" value="720" step="1"
    oninput="uniforms.stwist.value=this.value"/><br>
stwistOff<input type="range" min="0" max="0.1" value="0.03" step="0.001"
    oninput="uniforms.stwistOff.value=this.value"/><br>
sbend<input type="range" min="0" max="180" value="70" step="1"
    oninput="uniforms.sbend.value=this.value"/><br>

numInstances<input type="range" min="0" max="200" value="50" step="1"
    oninput="uniforms.numInstances.value=this.value"/><br>
numVerts<input type="range" min="2" max="200" value="50" step="1"
    oninput="uniforms.numVerts.value=this.value"/><br>

</div>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Example to show procudural rendering in three.js
// Based on Horn of horns, Todd and Latham, 'Evolutionary Art and Computers', 1992
// and a very simplified version of more recent Organic Mutator exhibitions

// import * as THREE from "https://rawgit.com/mrdoob/three.js/dev/build/three.module.js";
// import * as THREE from "https://cdn.jsdelivr.net/gh/sjpt/three.js@noAttributes/build/three.module.js";
import * as THREE from "https://programbits.co.uk/three/three.module.js";
import { TrackballControls } from "https://rawgit.com/mrdoob/three.js/dev/examples/jsm/controls/TrackballControls.js";

var scene, line, renderer, camera, material, uniforms, geom, controls;

init();
animate();

function init() {

    // renderer
    var canvas = document.createElement('canvas');
    var gl = canvas.getContext('webgl2', {});
    renderer = new THREE.WebGLRenderer({context: gl, canvas});

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

	scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 10 );
    camera.position.set( 0, 0, 2 );
    scene.add(camera);

    // controls
    controls = new TrackballControls( camera, renderer.domElement );

    // geometry
    geom = new THREE.InstancedBufferGeometry();
    // numVerts and numInstances are modified dynamically and set in animate()
    //geom.instanceCount = numInstances;
    //geom.drawRange.count = numVerts;
    
    var vertexShader=`#version 300 es
    uniform mat4 projectionMatrix, modelViewMatrix;
    uniform float mstack, mtwist, mtwistOff, mbend;
    uniform float sstack, stwist, stwistOff, sbend;
    uniform float numInstances, numVerts;
    out vec3 vcol;

    #define PI radians(180.0)
    // i indicates how far down a particular horn we are
    // x,y,z is a position that is distorted as it passes through the...