Apply color gradient to material on mesh – three.js

Simple gradient shader, based on uvs: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(60, 1, 1, 1000); camera.position.set(13, 25, 38); camera.lookAt(scene.position); var renderer = new THREE.WebGLRenderer({ antialias: true }); var canvas = renderer.domElement document.body.appendChild(canvas); var controls = new THREE.OrbitControls(camera, renderer.domElement); var geometry = new THREE.CylinderBufferGeometry(2, 5, 20, 32, 1, true); var material = … Read more

Drawing a border on a 2d polygon with a fragment shader

All you need are the barycentric coordinates, since you are dealing with triangles. Assign each vertex of the triangle an identity, and then use the hardware’s built-in interpolation between the vertex and fragment stages to figure out the relative distance from each of the vertices in your fragment shader. You can think of the barycentric … Read more