Related
I need to get the rotation differences between the model and the camera, convert the values to radians/degrees, and pass it to the fragment shader.
For that I need to decompose and the Model rotation matrix and maybe the camera view matrix as well. I cannot seem to find a way to decompose mechanism suitable within a shader.
The rotation details goes into fragment shader to calculate uv offset.
original_rotation + viewing_angles to calculate a final sprite-like offset of the following texture and shown as billboards.
Ultimately UV should offset downwards (ex:H3 to A3) looking from down, upwards looking from up (ex:A3 to H3), left to right looking and viceversa looking from sides (ex: D1 to D8 and viceversa).
const vertex_shader = `
precision highp float;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
attribute vec3 position;
attribute vec2 uv;
attribute mat4 instanceMatrix;
attribute float index;
attribute float texture_index;
uniform vec2 rows_cols;
uniform vec3 camera_location;
varying float vTexIndex;
varying vec2 vUv;
varying vec4 transformed_normal;
float normal_to_orbit(vec3 rotation_vector, vec3 view_vector){
rotation_vector = normalize(rotation_vector);
view_vector = normalize(view_vector);
vec3 x_direction = vec3(1.0,0,0);
vec3 y_direction = vec3(0,1.0,0);
vec3 z_direction = vec3(0,0,1.0);
float rotation_x_length = dot(rotation_vector, x_direction);
float rotation_y_length = dot(rotation_vector, y_direction);
float rotation_z_length = dot(rotation_vector, z_direction);
float view_x_length = dot(view_vector, x_direction);
float view_y_length = dot(view_vector, y_direction);
float view_z_length = dot(view_vector, z_direction);
//TOP
float top_rotation = degrees(atan(rotation_x_length, rotation_z_length));
float top_view = degrees(atan(view_x_length, view_z_length));
float top_final = top_view-top_rotation;
float top_idx = floor(top_final/(360.0/rows_cols.x));
//FRONT
float front_rotation = degrees(atan(rotation_x_length, rotation_z_length));
float front_view = degrees(atan(view_x_length, view_z_length));
float front_final = front_view-front_rotation;
float front_idx = floor(front_final/(360.0/rows_cols.y));
return abs((front_idx*rows_cols.x)+top_idx);
}
vec3 extractEulerAngleXYZ(mat4 mat) {
vec3 rotangles = vec3(0,0,0);
rotangles.x = atan(mat[2].z, -mat[1].z);
float cosYangle = sqrt(pow(mat[0].x, 2.0) + pow(mat[0].y, 2.0));
rotangles.y = atan(cosYangle, mat[0].z);
float sinXangle = sin(rotangles.x);
float cosXangle = cos(rotangles.x);
rotangles.z = atan(cosXangle * mat[1].y + sinXangle * mat[2].y, cosXangle * mat[1].x + sinXangle * mat[2].x);
return rotangles;
}
float view_index(vec3 position, mat4 mv_matrix, mat4 rot_matrix){
vec4 posInView = mv_matrix * vec4(0.0, 0.0, 0.0, 1.0);
// posInView /= posInView[3];
vec3 VinView = normalize(-posInView.xyz); // (0, 0, 0) - posInView
// vec4 NinView = normalize(rot_matrix * vec4(0.0, 0.0, 1.0, 1.0));
// float NdotV = dot(NinView, VinView);
vec4 view_normal = rot_matrix * vec4(VinView.xyz, 1.0);
float view_x_length = dot(view_normal.xyz, vec3(1.0,0,0));
float view_y_length = dot(view_normal.xyz, vec3(0,1.0,0));
float view_z_length = dot(view_normal.xyz, vec3(0,0,1.0));
// float radians = atan(-view_x_length, -view_z_length);
float radians = atan(view_x_length, view_z_length);
// float angle = radians/PI*180.0 + 180.0;
float angle = degrees(radians);
if (radians < 0.0) { angle += 360.0; }
if (0.0<=angle && angle<=360.0){
return floor(angle/(360.0/rows_cols.x));
}
return 0.0;
}
void main(){
vec4 original_normal = vec4(0.0, 0.0, 1.0, 1.0);
// transformed_normal = modelViewMatrix * instanceMatrix * original_normal;
vec3 rotangles = extractEulerAngleXYZ(modelViewMatrix * instanceMatrix);
// transformed_normal = vec4(rotangles.xyz, 1.0);
transformed_normal = vec4(camera_location.xyz, 1.0);
vec4 v = (modelViewMatrix* instanceMatrix* vec4(0.0, 0.0, 0.0, 1.0)) + vec4(position.x, position.y, 0.0, 0.0) * vec4(1.0, 1.0, 1.0, 1.0);
vec4 model_center = (modelViewMatrix* instanceMatrix* vec4(0.0, 0.0, 0.0, 1.0));
vec4 model_normal = (modelViewMatrix* instanceMatrix* vec4(0.0, 0.0, 1.0, 1.0));
vec4 cam_loc = vec4(camera_location.xyz, 1.0);
vec4 view_vector = normalize((cam_loc-model_center));
//float findex = normal_to_orbit(model_normal.xyz, view_vector.xyz);
float findex = view_index(position, base_matrix, combined_rot);
vTexIndex = texture_index;
vUv = vec2(mod(findex,rows_cols.x)/rows_cols.x, floor(findex/rows_cols.x)/rows_cols.y) + (uv / rows_cols);
//vUv = vec2(mod(index,rows_cols.x)/rows_cols.x, floor(index/rows_cols.x)/rows_cols.y) + (uv / rows_cols);
gl_Position = projectionMatrix * v;
// gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
}
`
const fragment_shader = (texture_count) => {
var fragShader = `
precision highp float;
uniform sampler2D textures[${texture_count}];
varying float vTexIndex;
varying vec2 vUv;
varying vec4 transformed_normal;
void main() {
vec4 finalColor;
`;
for (var i = 0; i < texture_count; i++) {
if (i == 0) {
fragShader += `if (vTexIndex < ${i}.5) {
finalColor = texture2D(textures[${i}], vUv);
}
`
} else {
fragShader += `else if (vTexIndex < ${i}.5) {
finalColor = texture2D(textures[${i}], vUv);
}
`
}
}
//fragShader += `gl_FragColor = finalColor * transformed_normal; }`;
fragShader += `gl_FragColor = finalColor; }`;
// fragShader += `gl_FragColor = startColor * finalColor; }`;
// int index = int(v_TexIndex+0.5); //https://stackoverflow.com/questions/60896915/texture-slot-not-getting-picked-properly-in-shader-issue
//console.log('frag shader: ', fragShader)
return fragShader;
}
function reset_instance_positions() {
const dummy = new THREE.Object3D();
const offset = 500*4
for (var i = 0; i < max_instances; i++) {
dummy.position.set(offset-(Math.floor(i % 8)*500), offset-(Math.floor(i / 8)*500), 0);
dummy.updateMatrix();
mesh.setMatrixAt(i, dummy.matrix);
}
mesh.instanceMatrix.needsUpdate = true;
}
function setup_geometry() {
const geometry = new THREE.InstancedBufferGeometry().copy(new THREE.PlaneBufferGeometry(400, 400));
const index = new Float32Array(max_instances * 1); // index
for (let i = 0; i < max_instances; i++) {
index[i] = (i % max_instances) * 1.0 /* index[i] = 0.0 */
}
geometry.setAttribute("index", new THREE.InstancedBufferAttribute(index, 1));
const texture_index = new Float32Array(max_instances * 1); // texture_index
const max_maps = 1
for (let i = 0; i < max_instances; i++) {
texture_index[i] = (Math.floor(i / max_instances) % max_maps) * 1.0 /* index[i] = 0.0 */
}
geometry.setAttribute("texture_index", new THREE.InstancedBufferAttribute(texture_index, 1));
const textures = [texture]
const grid_xy = new THREE.Vector2(8, 8)
mesh = new THREE.InstancedMesh(geometry,
new THREE.RawShaderMaterial({
uniforms: {
textures: {
type: 'tv',
value: textures
},
rows_cols: {
value: new THREE.Vector2(grid_xy.x * 1.0, grid_xy.y * 1.0)
},
camera_location: {
value: camera.position
}
},
vertexShader: vertex_shader,
fragmentShader: fragment_shader(textures.length),
side: THREE.DoubleSide,
// transparent: true,
}), max_instances);
scene.add(mesh);
reset_instance_positions()
}
var camera, scene, mesh, renderer;
const max_instances = 64
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight,1, 10000 );
camera.position.z = 1024;
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
setup_geometry()
var canvas = document.createElement('canvas');
var context = canvas.getContext('webgl2');
renderer = new THREE.WebGLRenderer({
canvas: canvas,
context: context
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
var dataurl = "https://i.stack.imgur.com/accaU.png"
var texture;
var imageElement = document.createElement('img');
imageElement.onload = function(e) {
texture = new THREE.Texture(this);
texture.needsUpdate = true;
init();
animate();
};
imageElement.src = dataurl;
JSFiddle of work so far
So You got 4x4 transform matrix M used on xy plane QUAD and want to map its 4 corners (p0,p1,p2,p3) to your texture with "repaeat" like manner (crossing border from left/right/up/down will return right/left/down/up) based on direction of Z axis of the matrix.
You face 2 problems...
M rotation is 3 DOF and you want just 2 DOF (yaw,pitch) so if roll present the result might be questionable
if texture crosses borders you need to handle this in GLSL to avoid seems
so either do this in geometry shader and divide the quad to more if needed or use enlarged texture where you have the needed overlaps ...
Now if I did not miss something the conversion is like this:
const float pi=3.1415926535897932384626433832795;
vec3 d = normalize(z axis from M);
vec2 dd = normalize(d.xy);
u = atan2(dd.y,dd.x);
v = acos(d.z);
u = (u+pi)/(2.0*pi);
v = v/pi
The z axis extraction is just simple copy of 3th column/row (depends on your notation) from your matrix 'M' or transforming (1,0,0,0) by it. For more info see:
Understanding 4x4 homogenous transform matrices
In case of overlapped texture you need to add also this:
const float ov = 1.0/8.0; // overlap size
u = ov + (u/(ov+ov+1.0));
v = ov + (v/(ov+ov+1.0));
And the texture would look like:
In case your quads cover more than 1/8 of your original texture you need to enlarge the overlap ...
Now to handle the corners of QUAD instead of just axis you could translate the quad by distance l in Z+ direction in mesh local coordinates, apply the M on them and use those 4 points as directions to compute u,v in vertex shader. The l will affect how much of the texture area is used for quad ... This approach might even handle roll but did not test any of this yet...
After implementing it my fears was well grounded as any 2 euler angles affect each other so the result is OK on most of the directions but in edge cases the stuff get mirrored and or jumped in one or both axises probably due to area coverage difference between 3 DOF and 2 DOF (unless I made a bug in my code or the math was not computed correctly in vertex which happened to me before due to bug in drivers)
If you going for azimut/elevation that should be fine as its 2 DOF too the equation above shoul dwork for them too +/- some range conversion if needed.
I need a shader that takes 3 input colors and generates noise as seen below.
It is easy to achieve in Blender with the help of the "Noise Texture" and the "Color Ramp" nodes.
I've found this gist, which might solve my problem. But I wasn't able to configure the colors. And also the noise looks a lot "sharper" than the result in Blender.
Will I need to write my own shader for this or is there a simpler way to achieve this effect with ThreeJS?
Basically, you need just two things:
Noise function in shader
A gradiental texture.
I chose FBM for noise and used .onBeforeCompile() to change a built-in material (Standard):
body{
overflow: hidden;
margin: 0;
}
<canvas id="cnvsGradient" width="300" height="50" style="position: absolute; margin: 10px; border: 1px solid aqua"/>
<script>
// https://github.com/yiwenl/glsl-fbm/blob/master/3d.glsl
const fbm = `
#define NUM_OCTAVES 5
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}
float noise(vec3 p){
vec3 a = floor(p);
vec3 d = p - a;
d = d * d * (3.0 - 2.0 * d);
vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
vec4 k1 = perm(b.xyxy);
vec4 k2 = perm(k1.xyxy + b.zzww);
vec4 c = k2 + a.zzzz;
vec4 k3 = perm(c);
vec4 k4 = perm(c + 1.0);
vec4 o1 = fract(k3 * (1.0 / 41.0));
vec4 o2 = fract(k4 * (1.0 / 41.0));
vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);
return o4.y * d.y + o4.x * (1.0 - d.y);
}
float fbm(vec3 x) {
float v = 0.0;
float a = 0.5;
vec3 shift = vec3(100);
for (int i = 0; i < NUM_OCTAVES; ++i) {
v += a * noise(x);
x = x * 2.0 + shift;
a *= 0.5;
}
return v;
}
`;
</script>
<script type="module">
console.clear();
import * as THREE from "https://cdn.skypack.dev/three#0.136.0";
import {OrbitControls} from "https://cdn.skypack.dev/three#0.136.0/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x444444);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
let light = new THREE.DirectionalLight(0xffffff);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
let g = new THREE.CylinderBufferGeometry(2, 1, 5, 6, 64);
let pos = g.attributes.position;
let v = new THREE.Vector3();
let axis = new THREE.Vector3(0, 1, 0);
for(let i = 0; i < pos.count; i++){
v.fromBufferAttribute(pos, i);
let ratio = (v.y - (-2.5)) / 5;
v.applyAxisAngle(axis, THREE.MathUtils.degToRad(60) * ratio);
pos.setXYZ(i, v.x, v.y, v.z);
}
g.computeVertexNormals();
let uniforms = {
tex: {
value: setGradient()
}
}
let m = new THREE.MeshStandardMaterial({
metalness: 0.25,
roughness: 0.75,
onBeforeCompile: shader => {
shader.uniforms.tex = uniforms.tex;
shader.vertexShader = `
varying vec3 vPos;
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
//vPos = (modelMatrix * vec4(position, 1.0)).xyz;
vPos = vec3(position);
`
);
//console.log(shader.vertexShader);
shader.fragmentShader = `
uniform sampler2D tex;
varying vec3 vPos;
${fbm}
${shader.fragmentShader}
`.replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`
float d = fbm(vPos * 0.5);
for(int i = 0; i < 4; i++){
d = fbm(vPos * (float(i) + 1.) * d);
}
vec3 col = texture(tex, vec2(d, 0.5)).rgb;
vec4 diffuseColor = vec4( col, opacity );`
);
//console.log(shader.fragmentShader);
}
});
let o = new THREE.Mesh(g, m);
scene.add(o);
window.addEventListener( 'resize', onWindowResize, false );
renderer.setAnimationLoop(() => {
o.rotation.y += 0.01;
renderer.render(scene, camera);
});
function setGradient(){
let canvas = document.getElementById('cnvsGradient');
let ctx = canvas.getContext('2d');
let gradient = ctx.createLinearGradient(0,0, 300,0);
gradient.addColorStop(0.15, 'yellow');
gradient.addColorStop(.5, 'red');
gradient.addColorStop(0.85, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
return new THREE.CanvasTexture(canvas);
}
function onWindowResize() {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( innerWidth, innerHeight );
}
</script>
I have the code where I am trying to make a metaballs motion transition between particles like Shadertoy sketch https://www.shadertoy.com/view/wtd3Wn
So, in the end, I need something like this:
Eventually, it has to be animated as well.
To do this, I have created another shader [Joint] with width/height equal to the distance between particles and it's already got their position, so if you call
gl_FragColor = vec4(1.0 - circle(fragCoord, startPos, 16.0 ) * circle(fragCoord, endPos, 16.0 ) );
it would overdraw circles at their positions.
But when I am trying to draw metaballs, I've got nothing.
Pretty sure that I am doing something wrong with fragCoord initialization or I have to tweak these parameters:
const float threshold = 3.0;
const float density = 1000.0;
const float norm = 2.0;
and
balls[0] = setMetaball(vec2(0.0, 0.0), 0.2, vec3(0.0, 0.0, 1.0));
balls[1] = setMetaball(startPos, 0.05, vec3(0.0, 0.0, 1.0));
balls[2] = setMetaball(endPos, 0.1, vec3(0.0, 1.0, 0.0));
balls[3] = setMetaball(endPos, 0.05, vec3(0.0, 1.0, 0.0));
positions and radiuses
THREE.TOUCH = {};
var circularPoint = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px"><circle cx="64" cy="64" r="62" fill="white" /></svg>';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(35, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 20);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xEEEEEE, 1.0);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var N = 4,
verts = [],
colors = [],
radius = [];
verts = [
new THREE.Vector3(0.0, 0.0, -4.0),
new THREE.Vector3(-4.0, 0.0, 0.0),
new THREE.Vector3(4.0, 0.0, 0.0),
new THREE.Vector3(0.0, 0.0, 4.0)
];
colors.push(1.0, 0., 1.0);
colors.push(1.0, 0., 1.0);
colors.push(0.847, 0.332, 0.347);
colors.push(0.457, 0.695, 0.675);
for (var i = 0; i < N; i++) {
radius.push(0.5);
}
var pointsGeometry = new THREE.BufferGeometry().setFromPoints(verts);
pointsGeometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
pointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius), 1));
var pointsMaterial = new THREE.ShaderMaterial({
uniforms: {
viewport: {
value: window.innerHeight * window.devicePixelRatio
},
texture: {
value: new THREE.TextureLoader().load(circularPoint)
},
resolution: {
value: [innerWidth * 2, innerHeight * 2]
}
},
vertexShader: document.getElementById("vertexParticle").textContent,
fragmentShader: document.getElementById("fragmentParticle").textContent,
transparent: true
})
var verts2 = [],
colors2 = [],
radius2 = [];
var dist = new THREE.Vector3(-4.0, 0.0, 0.0).distanceTo(new THREE.Vector3(0.0, 0.0, -4.0));
for (var i = 0; i < 1; i++) {
for (var j = i + 1; j < 2; j++) {
var dist = verts[i].distanceTo(verts[j]);
var nv = new THREE.Vector3(verts[i].x, verts[i].y, verts[i].z);
verts2.push(nv.lerp(verts[j], 0.5));
radius2.push(dist / 2.0 + 0.5);
}
}
var jointsGeometry = new THREE.BufferGeometry().setFromPoints(verts2);
jointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius2), 1));
var jointsMaterial = new THREE.ShaderMaterial({
uniforms: {
viewport: {
value: innerHeight * devicePixelRatio
},
texture: {
value: new THREE.TextureLoader().load(circularPoint)
},
start: {
value: verts[0]
},
end: {
value: verts[1]
},
resolution: {
value: [innerWidth * 2, innerHeight * 2]
}
},
vertexShader: document.getElementById("vertexJoint").textContent,
fragmentShader: document.getElementById("fragmentJoint").textContent,
transparent: true
})
jointsMaterial.extensions.derivatives = true;
jointsMaterial.extensions.fragDepth = true;
jointsMaterial.extensions.drawBuffers = true;
var points = new THREE.Points(pointsGeometry, pointsMaterial);
scene.add(points);
var joints = new THREE.Points(jointsGeometry, jointsMaterial);
scene.add(joints);
renderer.setAnimationLoop(function() {
renderer.render(scene, camera)
});
body { overflow: hidden; margin: 0; }
<html>
<head>
<meta charset="utf-8">
<title>THREE.JS METABALLS</title>
<meta name="description" content="Ehno based on D3.JS | THREE.JS stack.">
<meta name="keywords" content="HTML,CSS,CSV,JavaScript,D3.JS,THREE.JS">
<meta name="author" content="Vladimir V. KUCHINOV">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script type="x-shader/x-vertex" id="vertexParticle">
#define PI 3.141592
attribute float radius;
attribute vec3 color;
uniform float viewport;
varying vec3 vColor;
void main() {
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = viewport * radius * PI / -mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentParticle">
varying vec3 vColor;
uniform sampler2D texture;
uniform vec2 resolution;
void main() {
gl_FragColor = vec4(vColor, 1.) * texture2D(texture, gl_PointCoord);
if (gl_FragColor.a < 0.1) discard;
}
</script>
<script type="x-shader/x-vertex" id="vertexJoint">
#define PI 3.141592
attribute float radius;
uniform float viewport;
uniform vec2 resolution;
uniform vec3 start;
uniform vec3 end;
varying vec2 outStart;
varying vec2 outEnd;
varying vec2 vUv;
vec2 projectWorldCoordinates(vec3 in_){
vec4 p = projectionMatrix * modelViewMatrix * vec4(in_.xy, in_.z, 1.0);
return p.xy / p.w;
}
void main() {
vUv = uv;
outStart = projectWorldCoordinates(start);
outEnd = projectWorldCoordinates(end);
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = viewport * radius * PI / -mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentJoint">
uniform vec2 resolution;
varying vec2 outStart;
varying vec2 outEnd;
varying vec2 vUv;
const float threshold = 3.0;
const float density = 1000.0;
const float norm = 2.0;
vec2 startPos;
vec2 endPos;
float pixelPower;
vec2 fragCoord;
vec4 mixColor;
struct Metaball{
vec2 position;
float radius;
vec3 color;
float power;
};
Metaball balls[4];
float Norm(float num_) { return pow(num_, norm); }
Metaball setMetaball(vec2 position_, float radius_, vec3 color_){
Metaball m;
m.position = position_;
m.radius = radius_;
m.color = color_;
vec2 pixelPosition = fragCoord.xy / resolution.xy;
pixelPosition.x = pixelPosition.x * resolution.x / resolution.y;
vec2 distanceVector = pixelPosition - position_;
distanceVector = vec2(abs(distanceVector.x), abs(distanceVector.y));
float normDistance = Norm(distanceVector.x) + Norm(distanceVector.y);
m.power = Norm(radius_) / normDistance;
return m;
}
vec4 drawMetaballs(){
vec4 color = vec4(0.);
vec3 val;
int powerMeta = 0;
float maxPower = 0.0;
balls[0] = setMetaball(vec2(0.0, 0.0), 0.2, vec3(0.0, 0.0, 1.0));
balls[1] = setMetaball(startPos, 0.05, vec3(0.0, 0.0, 1.0));
balls[2] = setMetaball(endPos, 0.1, vec3(0.0, 1.0, 0.0));
balls[3] = setMetaball(endPos, 0.05, vec3(0.0, 1.0, 0.0));
for(int i = 0; i < 4; i++){
pixelPower += balls[i].power;
if(maxPower < balls[i].power){
maxPower = balls[i].power;
powerMeta = i;
}
balls[i].power *= balls[i].radius;
}
val = vec3(0.);
for(int i = 0; i < 4; i++){
vec2 pixelPosition = fragCoord / resolution.xy;
pixelPosition.x = pixelPosition.x * resolution.x / resolution.y;
vec2 distanceVector = pixelPosition - balls[i].position;
distanceVector = vec2(abs(distanceVector.x), abs(distanceVector.y));
float normDistance = Norm(distanceVector.x) + Norm(distanceVector.y);
balls[i].power = Norm(balls[i].radius) / normDistance;
val += balls[i].color * (balls[i].power / maxPower);
}
if(pixelPower < threshold || pixelPower > threshold + Norm(density))
{
val = vec3(0.0);
}
color = vec4(val, 1.0);
return color;
}
float circle( vec2 _st, vec2 _center, float _radius ){
const float thickness = 8.0;
float dist = length(_st - _center);
return smoothstep(0.0, thickness / 2.0, abs(_radius - dist));
}
void main() {
vec2 fragCoord = vec2(gl_FragCoord.x, gl_FragCoord.y);
vec2 uv = (fragCoord * 2.0 - resolution.xy) / resolution.y;
startPos = (outStart.xy * 0.5 + 0.5) * resolution.xy;
endPos = (outEnd.xy * 0.5 + 0.5) * resolution.xy;
vec4 mb = drawMetaballs();
gl_FragColor = mb; //vec4(1.0 - circle(fragCoord, startPos, 16.0 ) * circle(fragCoord, endPos, 16.0 ) );
}
</script>
</body>
</html>
Done.
<html>
<head>
<meta charset="utf-8">
<title>THREE.JS METABALLS</title>
<meta name="description" content="Ehno based on D3.JS | THREE.JS stack.">
<meta name="keywords" content="HTML,CSS,CSV,JavaScript,D3.JS,THREE.JS">
<meta name="author" content="Vladimir V. KUCHINOV">
<style>
body { overflow: hidden; margin: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!--
<script src="LineMaterial.js"></script>
<script src="LineSegments2.js"></script>
<script src="LineSegmentsGeometry.js"></script>
<script src="LineGeometry.js"></script>
<script src="Line2.js"></script>
-->
<script type="x-shader/x-vertex" id="vertexParticle">
#define PI 3.141592
attribute float radius;
attribute vec3 color;
uniform float viewport;
varying vec3 vColor;
void main() {
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = viewport * radius * PI / -mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentParticle">
varying vec3 vColor;
uniform sampler2D texture;
uniform vec2 resolution;
void main() {
gl_FragColor = vec4(vColor, 1.) * texture2D(texture, gl_PointCoord);
if (gl_FragColor.a < 0.5) discard;
}
</script>
<script type="x-shader/x-vertex" id="vertexJoint">
#define PI 3.141592
attribute float radius;
uniform float viewport;
uniform vec2 resolution;
uniform vec3 start;
uniform vec3 end;
varying vec2 outStart;
varying vec2 outEnd;
varying float size;
vec2 projectWorldCoordinates(vec3 in_){
vec4 p = projectionMatrix * modelViewMatrix * vec4(in_.xy, in_.z, 1.0);
return p.xy / p.w;
}
void main() {
outStart = projectWorldCoordinates(start);
outEnd = projectWorldCoordinates(end);
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = viewport * radius * PI / -mvPosition.z;
size = viewport * radius * PI / -mvPosition.z;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentJoint">
uniform vec2 resolution;
uniform float time;
varying vec2 outStart;
varying vec2 outEnd;
varying float size;
const float threshold = 3.0;
const float density = 1000.0;
const float norm = 2.0;
vec2 startPos;
vec2 endPos;
float pixelPower;
vec2 fragCoord;
vec4 mixColor;
struct Metaball{
vec2 position;
float radius;
vec4 color;
float power;
};
Metaball balls[4];
float Norm(float num_) { return pow(num_, norm); }
Metaball setMetaball(vec2 position_, float radius_, vec4 color_, vec2 uv_){
Metaball m;
m.position = position_;
m.radius = radius_;
m.color = color_;
vec2 distanceVector = uv_ - position_;
distanceVector = vec2(abs(distanceVector.x), abs(distanceVector.y));
float normDistance = Norm(distanceVector.x) + Norm(distanceVector.y);
m.power = Norm(radius_) / normDistance;
return m;
}
vec4 drawMetaballs(vec2 p0_, vec2 p1_, vec2 uv_){
vec4 val;
int powerMeta = 0;
float maxPower = 0.0;
vec2 p0 = startPos;
vec2 p1 = endPos;
vec2 d0 = mix(p0, p1, -(sin(time) - 1.0) / 4.);
vec2 d1 = mix(p1, p0, -(sin(time) - 1.0) / 4.);
float rad = size / 8.0;
balls[0] = setMetaball(p0, rad, vec4(0.0, 1.0, 1.0, 1.0), uv_);
balls[1] = setMetaball(d0, rad * 0.75, vec4(0.0, 1.0, 1.0, 1.0), uv_);
balls[2] = setMetaball(p1, rad, vec4(1.0, 0.0, 1.0, 1.0), uv_);
balls[3] = setMetaball(d1, rad * 0.75, vec4(1.0, 0.0, 1.0, 1.0), uv_);
for(int i = 0; i < 4; i++){
pixelPower += balls[i].power;
if(maxPower < balls[i].power){
maxPower = balls[i].power;
powerMeta = i;
}
balls[i].power *= balls[i].radius;
}
val = vec4(0.);
for(int i = 0; i < 4; i++){
vec2 distanceVector = uv_ - balls[i].position;
distanceVector = vec2(abs(distanceVector.x), abs(distanceVector.y));
float normDistance = Norm(distanceVector.x) + Norm(distanceVector.y);
balls[i].power = Norm(balls[i].radius) / normDistance;
val += balls[i].color * (balls[i].power / maxPower);
}
if(pixelPower < threshold || pixelPower > threshold + Norm(density))
{
val = vec4(0.0);
}
return vec4(val);
}
float DigitBin( const int x_ )
{
return x_==0?480599.0:x_==1?139810.0:x_==2?476951.0:x_==3?476999.0:x_==4?350020.0:x_==5?464711.0:x_==6?464727.0:x_==7?476228.0:x_==8?481111.0:x_==9?481095.0:0.0;
}
float PrintValue( const vec2 position_, const float string_, const float maxDigits_, const float decimal_ )
{
if ((position_.y < 0.0) || (position_.y >= 1.0)) return 0.0;
float fLog10Value = log2(abs(string_)) / log2(10.0);
float fBiggestIndex = max(floor(fLog10Value), 0.0);
float fDigitIndex = maxDigits_ - floor(position_.x);
float fCharBin = 0.0;
if(fDigitIndex > (-decimal_ - 1.01)) {
if(fDigitIndex > fBiggestIndex) {
if((string_ < 0.0) && (fDigitIndex < (fBiggestIndex+1.5))) fCharBin = 1792.0;
} else {
if(fDigitIndex == -1.0) {
if(decimal_ > 0.0) fCharBin = 2.0;
} else {
float fReducedRangeValue = string_;
if(fDigitIndex < 0.0) { fReducedRangeValue = fract( string_ ); fDigitIndex += 1.0; }
float fDigitValue = (abs(fReducedRangeValue / (pow(10.0, fDigitIndex))));
fCharBin = DigitBin(int(floor(mod(fDigitValue, 10.0))));
}
}
}
return floor(mod((fCharBin / pow(2.0, floor(fract(position_.x) * 4.0) + (floor(position_.y * 5.0) * 4.0))), 2.0));
}
float smooth_circle(float st, vec2 pos, float rad, vec2 uv)
{
return 1.0 - smoothstep(rad * rad - st, rad * rad, dot(uv - pos, uv - pos));
}
void main() {
vec2 fontSize = vec2(0.1, -0.1);
fragCoord = -1.0 + 2.0 * gl_PointCoord;
vec2 fragCoord2 = vec2(gl_FragCoord.x, gl_FragCoord.y);
vec2 uv = (fragCoord2 * 2.0 - resolution.xy) / resolution.y;
startPos = (outStart.xy * 0.5 + 0.5) * resolution.xy;
endPos = (outEnd.xy * 0.5 + 0.5) * resolution.xy;
vec3 debug = vec3( PrintValue( (fragCoord + vec2(1.25, -0.75)) / fontSize, gl_FragCoord.x, 5.0, 2.0) );
//startPos, endPos in screen coords (pixels)
vec3 circ = vec3(smooth_circle(1.0, startPos, 10.0, fragCoord2));
vec3 circ2 = vec3(smooth_circle(1.0, endPos, 10.0, fragCoord2));
//local: -1.0...1.0;
vec3 circ3 = vec3(smooth_circle(0.0, vec2(-1.), 0.25, fragCoord));
debug = debug + circ + circ2 + circ3;
gl_FragColor = vec4(drawMetaballs(startPos, endPos, fragCoord2));
}
</script>
<script>
THREE.TOUCH = {};
var joints, uniforms;
var circularPoint = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px"><circle cx="64" cy="64" r="62" fill="white" /></svg>';
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 200);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xEEEEEE, 1.0);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var N = 4,
verts = [],
colors = [],
radius = [];
verts = [
new THREE.Vector3(0.0, 0.0, -4.0),
new THREE.Vector3(-4.0, 0.0, 0.0),
new THREE.Vector3(4.0, 0.0, 0.0),
new THREE.Vector3(0.0, 0.0, 4.0)
];
colors.push(0.0, 1.0, 1.0);
colors.push(1.0, 0., 1.0);
colors.push(0.847, 0.332, 0.347);
colors.push(0.457, 0.695, 0.675);
for (var i = 0; i < N; i++) {
radius.push(0.5);
}
var pointsGeometry = new THREE.BufferGeometry().setFromPoints(verts);
pointsGeometry.addAttribute("color", new THREE.BufferAttribute(new Float32Array(colors), 3));
pointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius), 1));
var pointsMaterial = new THREE.ShaderMaterial({
uniforms: {
viewport: {
value: window.innerHeight * window.devicePixelRatio
},
texture: {
value: new THREE.TextureLoader().load(circularPoint)
},
resolution: {
value: [innerWidth * window.devicePixelRatio, innerHeight * window.devicePixelRatio]
}
},
vertexShader: document.getElementById("vertexParticle").textContent,
fragmentShader: document.getElementById("fragmentParticle").textContent,
transparent: true
})
var verts2 = [],
colors2 = [],
radius2 = [];
var dist = new THREE.Vector3(-4.0, 0.0, 0.0).distanceTo(new THREE.Vector3(0.0, 0.0, -4.0));
for (var i = 0; i < 1; i++) {
for (var j = i + 1; j < 2; j++) {
var dist = verts[i].distanceTo(verts[j]);
var nv = new THREE.Vector3(verts[i].x, verts[i].y, verts[i].z);
verts2.push(nv.lerp(verts[j], 0.5));
radius2.push(dist / 2.0 + 0.5);
}
}
var jointsGeometry = new THREE.BufferGeometry().setFromPoints(verts2);
jointsGeometry.addAttribute("radius", new THREE.BufferAttribute(new Float32Array(radius2), 1));
uniforms = {
viewport: {
value: innerHeight * devicePixelRatio
},
texture: {
value: new THREE.TextureLoader().load(circularPoint)
},
time: { value: 0.0 },
start: {
value: verts[0]
},
end: {
value: verts[1]
},
resolution: {
value: new THREE.Vector2(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio)
}
};
var jointsMaterial = new THREE.ShaderMaterial({
uniforms,
vertexShader: document.getElementById("vertexJoint").textContent,
fragmentShader: document.getElementById("fragmentJoint").textContent,
transparent: true
})
jointsMaterial.extensions.derivatives = true;
jointsMaterial.extensions.fragDepth = true;
jointsMaterial.extensions.drawBuffers = true;
var points = new THREE.Points(pointsGeometry, pointsMaterial);
scene.add(points);
joints = new THREE.Points(jointsGeometry, jointsMaterial);
scene.add(joints);
renderer.setAnimationLoop(function(timestamp) {
uniforms[ "time" ].value = timestamp / 1000;
renderer.render(scene, camera)
});
</script>
</body>
</html>
I'm creating 512 instances of the same 1x1 plane with a texture that has transparent areas. The planes are randomly spread around the origin like the image below.
How can the planes in front be drawn after the planes behind so that the transparency of the planes in front take into account the output of the planes from behind?
(with depthTest disabled)
(with depthTest normal)
For reference, the transparency disabled version of the instanced geometry. This proves that the planes are correctly positioned.
Update:
Adding code as asked:
import {
Mesh,
ShaderMaterial,
Vector3,
PlaneBufferGeometry,
EdgesGeometry,
LineBasicMaterial,
LineSegments,
InstancedBufferAttribute,
UniformsLib,
BufferAttribute,
TextureLoader,
InstancedBufferGeometry,
DoubleSide,
} from 'three'
import path from 'path'
import fs from 'fs'
import {
randomValueBetween,
} from '../../utils'
const vertexShader = fs.readFileSync(path.resolve(__dirname, './assets/vertex.glsl'), 'utf8')
const fragmentShader = fs.readFileSync(path.resolve(__dirname, './assets/fragment.glsl'), 'utf8')
const createInstancedAtrributes = (geometry, instanceCount) => {
const startseed = new InstancedBufferAttribute(new Float32Array(instanceCount * 1), 1)
const scale = new InstancedBufferAttribute(new Float32Array(instanceCount * 3), 3)
const offset = new InstancedBufferAttribute(new Float32Array(instanceCount * 2), 2)
const orientationY = new InstancedBufferAttribute(new Float32Array(instanceCount), 1)
const baseScale = 0.5
for (let i = 0; i < instanceCount; i += 1) {
scale.setXYZ(i,
baseScale * randomValueBetween(0.8, 1.3, 1),
baseScale * randomValueBetween(0.8, 1.3, 1),
baseScale * randomValueBetween(0.8, 1.3, 1),
)
orientationY.setX(i, randomValueBetween(0.0, 1.0, 3))
startseed.setX(i, randomValueBetween(1, 3, 1))
}
for (let i = 0; i < instanceCount / 4; i += 4) {
const randomX = randomValueBetween(-3.5, 3.5, 1)
const randomY = randomValueBetween(-3.5, 3.5, 1)
offset.setXY(i, randomX, randomY)
}
geometry.addAttribute('scale', scale)
geometry.addAttribute('offset', offset)
geometry.addAttribute('startseed', offset)
geometry.addAttribute('orientationY', offset)
return { scale, offset }
}
const createInstancedGeometry = (instancePerUnitCount) => {
const geometry = new InstancedBufferGeometry()
geometry.maxInstancedCount = instancePerUnitCount
const shape = new PlaneBufferGeometry(1, 1, 1, 3)
const data = shape.attributes
geometry.addAttribute('position', new BufferAttribute(new Float32Array(data.position.array), 3))
geometry.addAttribute('uv', new BufferAttribute(new Float32Array(data.uv.array), 2))
geometry.addAttribute('normal', new BufferAttribute(new Float32Array(data.normal.array), 3))
geometry.setIndex(new BufferAttribute(new Uint16Array(shape.index.array), 1))
shape.dispose()
createInstancedAtrributes(geometry, instancePerUnitCount)
return geometry
}
export default class GrassDeform extends Mesh {
constructor() {
const geometry = createInstancedGeometry(8 * 256)
const uniforms = {
uTime: {
type: 'f',
value: 0,
},
uMap: {
type: 't',
value: null,
},
}
const textureLoader = new TextureLoader()
textureLoader.load(path.resolve(__dirname, './assets/grass-texture-01.png'), (t) => {
uniforms.uMap.value = t
})
const material = new ShaderMaterial({
uniforms: Object.assign({},
UniformsLib.ambient,
UniformsLib.lights,
uniforms,
),
vertexShader,
fragmentShader,
lights: true,
transparent: true,
side: DoubleSide,
})
super(geometry, material)
this.geometry = geometry
this.material = material
this.up = new Vector3(0, 0, 1)
const lineGeo = new EdgesGeometry(geometry) // or WireframeGeometry
const mat = new LineBasicMaterial({ color: 0xffffff, linewidth: 2 })
const wireframe = new LineSegments(lineGeo, mat)
this.add(wireframe)
this.frustumCulled = false
}
update({ ellapsedTime }) {
this.material.uniforms.uTime.value = ellapsedTime
}
}
And the object is added to the scene like this:
const grass2 = new GrassDeform2()
grass2.position.set(-1, 0, 0.50)
grass2.rotateX(Math.PI / 2)
scene.add(grass2)
dirLight.target = grass2
const animate = (ellapsedTime = 0) => {
stats.begin()
grass2.update({ ellapsedTime })
/// other scene stuff
renderer.render(scene, playerController.camera)
requestAnimationFrame(animate)
}
animate()
The vertex shader:
#if NUM_DIR_LIGHTS > 0
struct DirectionalLight {
vec3 direction;
vec3 color;
int shadow;
float shadowBias;
float shadowRadius;
vec2 shadowMapSize;
};
uniform DirectionalLight directionalLights[ NUM_DIR_LIGHTS ];
#endif
uniform float uTime;
attribute vec2 offset;
attribute vec3 scale;
attribute float startseed;
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vDirectionalLightDirection;
varying vec3 vDirectionalLightColor;
varying vec3 uNormal;
void main() {
vec3 pos = position * scale;
pos.x += offset.x;
pos.z += offset.y;
pos.y += (scale.y - 1.0) * 0.5;
pos.y = orientationY
vPosition = pos;
uNormal = normal;
vUv = uv;
uNormal = normal;
vDirectionalLightDirection = directionalLights[0].direction;
vDirectionalLightColor = directionalLights[0].color;
float variation = startseed + uTime * 0.002;
float pass = (0.5 + pos.y) * 0.05;
pos.x += sin(pass + variation) * pass;
pos.z += cos(pass + variation + 0.01) * pass;
pos.y += sin(pass + variation - 0.01) * pass;
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
}
And the fragment shader (has some extra stuff for light, not added for now):
uniform sampler2D uMap;
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vDirectionalLightDirection;
varying vec3 vDirectionalLightColor;
varying vec3 uNormal;
void main() {
vec4 map = texture2D(uMap, vUv);
vec3 lightVector = normalize((vDirectionalLightDirection) - vPosition);
float dotNL = dot( uNormal, lightVector );
vec3 baseColor = map.rgb;
vec3 lightedColor = vDirectionalLightColor * 0.6 * dotNL;
if ( map.a < 0.5 ) discard; //!!! THIS WAS THE LINE NEEDED TO SOLVE THE ISSUE
gl_FragColor = vec4( map.rgb , 1 );
}
After applying the change from the final result, the scene looks right!
You can solve your problem with alpha testing. Use a pattern like the following in your fragment shader:
vec4 texelColor = texture2D( map, vUv );
if ( texelColor.a < 0.5 ) discard;
Your material will no longer need to have transparent = true, since you appear to be using a cut-out in which the texture alpha is either 0 or 1.
three.js r.88
I found nice water simulation from codepen and modified it with help from other thread here (can't find it anymore though).
I have used three.js couple of times before, but now I just can't comprehend why camera positioning/rotation/aspect/etc isn't working. No matter what coordinates or angle I give to camera and use updateProjectionMatrix nothing happens, camera just stays in one place.
I commented out resize events etc, since they don't do anything also.
Entire code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<style type="text/css">
body {
overflow: hidden;
margin: 0;
height: 100%;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
// init camera, scene, renderer
var scene, camera, renderer;
scene = new THREE.Scene();
var fov = 75,
aspect = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera(fov, aspect, 0.1, 1000);
camera.position.z = 200;
camera.rotate.z = 1.5707963268;
camera.updateProjectionMatrix();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xc4c4c4);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var clock = new THREE.Clock();
var tuniform = {
time: {
type: 'f',
value: 0.1
},
resolution: {
type: 'v2',
value: new THREE.Vector2()
},
mouse: {
type: 'v4',
value: new THREE.Vector2()
}
};
// Mouse position in - 1 to 1
renderer.domElement.addEventListener('mousedown', function(e) {
//var canvas = renderer.domElement;
//var rect = canvas.getBoundingClientRect();
//tuniform.mouse.value.x = (e.clientX - rect.left) / window.innerWidth * 2 - 1;
//tuniform.mouse.value.y = (e.clientY - rect.top) / window.innerHeight * -2 + 1;
});
renderer.domElement.addEventListener('mouseup', function(e) {
//var canvas = renderer.domElement;
//var rect = canvas.getBoundingClientRect();
//tuniform.mouse.value.z = (e.clientX - rect.left) / window.innerWidth * 2 - 1;
//tuniform.mouse.value.w = (e.clientY - rect.top) / window.innerHeight * -2 + 1;
});
// resize canvas function
window.addEventListener('resize',function() {
//camera.aspect = window.innerWidth / window.innerHeight;
//camera.updateProjectionMatrix();
//renderer.setSize(window.innerWidth, window.innerHeight);
});
tuniform.resolution.value.x = window.innerWidth;
tuniform.resolution.value.y = window.innerHeight;
// Create Plane
var material = new THREE.ShaderMaterial({
uniforms: tuniform,
vertexShader: document.getElementById('vertex-shader').textContent,
fragmentShader: document.getElementById('fragment-shader').textContent
});
var mesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight, 40), material
);
scene.add(mesh);
// draw animation
function render(time) {
tuniform.time.value += clock.getDelta();
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
}//]]>
</script>
</head>
<body>
<!-- THIS is OPENGL Shading language scripts -->
<script id="vertex-shader" type="no-js">
void main() {
gl_Position = vec4( position, 1.0 );
}
</script>
<script id="fragment-shader" type="no-js">
#ifdef GL_ES
precision mediump float;
#endif
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
varying vec2 surfacePosition;
const int NUM_STEPS = 8;
const float PI = 3.1415;
const float EPSILON = 1e-3;
float EPSILON_NRM = 0.1 / resolution.x;
// sea
const int ITER_GEOMETRY = 3;
const int ITER_FRAGMENT = 5;
const float SEA_HEIGHT = 0.6;
const float SEA_CHOPPY = 2.0;
const float SEA_SPEED = 0.5;
const float SEA_FREQ = 0.16;
const vec3 SEA_BASE = vec3(0.1,0.19,0.22); //meren pohjaväri
const vec3 SEA_WATER_COLOR = vec3(0.8,0.9,0.6);
const float SKY_INTENSITY = 1.0;
#define SEA_TIME time * SEA_SPEED
// math
mat4 fromEuler(vec3 ang) {
vec2 a1 = vec2(sin(ang.x),cos(ang.x));
vec2 a2 = vec2(sin(ang.y),cos(ang.y));
vec2 a3 = vec2(sin(ang.z),cos(ang.z));
mat4 m;
m[0] = vec4(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x,0.0);
m[1] = vec4(-a2.y*a1.x,a1.y*a2.y,a2.x,0.0);
m[2] = vec4(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y,0.0);
m[3] = vec4(0.0,0.0,0.0,1.0);
return m;
}
vec3 rotate(vec3 v, mat4 m) {
return vec3(dot(v,m[0].xyz),dot(v,m[1].xyz),dot(v,m[2].xyz));
}
float hash( vec2 p ) {
float h = dot(p,vec2(127.1,311.7));
return fract(sin(h)*43758.5453123);
}
float noise( in vec2 p ) {
vec2 i = floor( p );
vec2 f = fract( p );
vec2 u = f*f*(3.0-2.0*f);
return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ),
hash( i + vec2(1.0,0.0) ), u.x),
mix( hash( i + vec2(0.0,1.0) ),
hash( i + vec2(1.0,1.0) ), u.x), u.y);
}
// lighting
float diffuse(vec3 n,vec3 l,float p) { return pow(dot(n,l) * 0.4 + 0.6,p); }
float specular(vec3 n,vec3 l,vec3 e,float s) {
float nrm = (s + 8.0) / (3.1415 * 8.0);
return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
}
// sky
vec3 sky_color(vec3 e) {
e.y = max(e.y,0.0);
vec3 ret;
ret.x = pow(1.0-e.y,2.0);
ret.y = 1.0-e.y;
ret.z = 0.6+(1.0-e.y)*0.4;
return ret * SKY_INTENSITY;
}
// sea
float sea_octave(vec2 uv, float choppy) {
uv += noise(uv);
vec2 wv = 1.0-abs(sin(uv));
vec2 swv = abs(cos(uv));
wv = mix(wv,swv,wv);
return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
}
float map(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;
mat2 m = mat2(1.6,1.2,-1.2,1.6);
float d, h = 0.0;
for(int i = 0; i < ITER_GEOMETRY; i++) {
d = sea_octave((uv+SEA_TIME)*freq,choppy);
d += sea_octave((uv-SEA_TIME)*freq,choppy);
h += d * amp;
uv *= m; freq *= 1.9; amp *= 0.22;
choppy = mix(choppy,1.0,0.2);
}
return p.y - h;
}
float map_detailed(vec3 p) {
float freq = SEA_FREQ;
float amp = SEA_HEIGHT;
float choppy = SEA_CHOPPY;
vec2 uv = p.xz; uv.x *= 0.75;
mat2 m = mat2(1.6,1.2,-1.2,1.6);
float d, h = 0.0;
for(int i = 0; i < ITER_FRAGMENT; i++) {
d = sea_octave((uv+SEA_TIME)*freq,choppy);
d += sea_octave((uv-SEA_TIME)*freq,choppy);
h += d * amp;
uv *= m; freq *= 1.9; amp *= 0.22;
choppy = mix(choppy,1.0,0.2);
}
return p.y - h;
}
vec3 sea_color(in vec3 p, in vec3 n, in vec3 eye, in vec3 dist) {
float fresnel_o = 1.0 - max(dot(n,-eye),0.0);
float fresnel = pow(fresnel_o,3.0) * 0.65;
// reflection
vec3 refl = sky_color(reflect(eye,n));
// color
vec3 ret = SEA_BASE;
ret = mix(ret,refl,fresnel);
// wave peaks
float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
ret += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;
return ret;
}
// tracing
vec3 getNormal(vec3 p, float eps) {
vec3 n;
n.y = map_detailed(p);
n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
n.y = eps;
return normalize(n);
}
float hftracing(vec3 ori, vec3 dir, out vec3 p) {
float tm = 0.0;
float tx = 1000.0;
float hx = map(ori + dir * tx);
if(hx > 0.0) return tx;
float hm = map(ori + dir * tm);
float tmid = 0.0;
for(int i = 0; i < NUM_STEPS; i++) {
tmid = mix(tm,tx, hm/(hm-hx));
p = ori + dir * tmid;
float hmid = map(p);
if(hmid < 0.0) {
tx = tmid;
hx = hmid;
} else {
tm = tmid;
hm = hmid;
}
}
return tmid;
}
// main
void main(void) {
vec2 uv = gl_FragCoord.xy / resolution.xy;
uv = 1.0 - uv * 2.0;
uv.x *= resolution.x / resolution.y;
//uv = (surfacePosition+vec2(0., .5))*17. + 5E-3*(pow(length(surfacePosition+vec2(0. ,0.5)), -2.));
uv.y *= -1.;
//uv.y += -2.;
// ray
vec3 ang = vec3(0.0,0.003, pow(time, 0.6));
ang = vec3(0.0,clamp(2.0-mouse.y*0.01,-0.3,PI),mouse.x*0.01);
vec3 ori = vec3(0.0,3.5,time*.05);
vec3 dir = normalize(vec3(uv.xy,-2.0));
dir.z -= length(uv) * 0.15;
//dir = rotate(normalize(dir),ang);
// tracing
vec3 p;
float dens = hftracing(ori,dir,p);
vec3 dist = p - ori;
vec3 n = getNormal(p, dot(dist,dist)*EPSILON_NRM);
// color
vec3 color = sea_color(p,n,dir,dist);
vec3 light = normalize(vec3(0.0,1.0,0.8));
color += vec3(diffuse(n,light,80.0) * SEA_WATER_COLOR) * 0.12;
color += vec3(specular(n,light,dir,60.0));
// post
color = mix(sky_color(dir),color,pow(smoothstep(0.0,-0.05,dir.y),0.3));
color = pow(color,vec3(0.75));
gl_FragColor = vec4(color,1.0);
}
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "uz6yo2w3"
}], "*")
}
</script>
</body>
</html>
There are so much try in this code that it's not even clear to me what you're trying to do, but I can give some hints :
Change the camera.rotate to camera.rotation l. 30
Your mouse events are commented. If you want to rotate the camera with the mouse, you're gonna have to add a mousemove event ;
By the way, l. 50 you send a vec4 but loads it as a vec2 l. 126 ;
When the window is resized, you may also want to update the new resolution to the shader ;
l. 304, change the Z component of the camera's origin from vec3 ori = vec3(0.0, 3.5, time * 5.0); to vec3 ori = vec3(0.0, 3.5, time * 5.0); so you can see the camera moving along the sea ;
l. 306, instead of dir = rotate(normalize(dir), ang); add the initial dir = normalize(dir) * fromEuler(ang); (ang is the angle of the camera) ;
l. 149, change your mat4 fromEuler(vec3 ang){...} to the initial mat3 fromEuler(vec3 ang){...} function ;
l. 301, just put vec3 ang = vec3(0.0, 0.0, 0.0); and play with it. You may use mouse coordinates in this function, depending on how you want the user interact with the camera.