Viewing Animation Not Working

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Animation Not Working



User: Les C. 5 years ago
Was working previously in all browsers. Did something happen in EW I need to be aware of?

Header code:
[code]
<style class="cp-pen-styles">
canvas {display: block;position:absolute;top:0;margin:0}
</style>

<style>
canvas {
display: block;
}
</style>
[/code]

Footer code:
[code]
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js">

</script>
<script src="https://threejs.org/examples/js/GPUComputationRenderer.js">
</script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

<script>
// From: https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83#simplex-noise
const shaderPartialSimplexNoise = `
// Simplex 3D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}

float snoise(vec3 v){
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;

// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );

// x0 = x0 - 0. + 0.0 * C
vec3 x1 = x0 - i1 + 1.0 * C.xxx;
vec3 x2 = x0 - i2 + 2.0 * C.xxx;
vec3 x3 = x0 - 1. + 3.0 * C.xxx;

// Permutations
i = mod(i, 289.0 );
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

// Gradients
// ( N*N points uniformly over a square, mapped onto an octahedron.)
float n_ = 1.0/7.0; // N=7
vec3 ns = n_ * D.wyz - D.xzx;

vec4 j = p - 49.0 * floor(p * ns.z *ns.z); // mod(p,N*N)

vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)

vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);

vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );

vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));

vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);

//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;

// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}`;

// From: https://github.com/cabbibo/glsl-curl-noise
const shaderPartialCurlNoise = `
${shaderPartialSimplexNoise}

vec3 snoiseVec3( vec3 x ){
float s = snoise(vec3( x ));
float s1 = snoise(vec3( x.y - 19.1 , x.z + 33.4 , x.x + 47.2 ));
float s2 = snoise(vec3( x.z + 74.2 , x.x - 124.5 , x.y + 99.4 ));
vec3 c = vec3( s , s1 , s2 );
return c;
}

vec3 curlNoise( vec3 p ){
const float e = .1;
vec3 dx = vec3( e , 0.0 , 0.0 );
vec3 dy = vec3( 0.0 , e , 0.0 );
vec3 dz = vec3( 0.0 , 0.0 , e );

vec3 p_x0 = snoiseVec3( p - dx );
vec3 p_x1 = snoiseVec3( p + dx );
vec3 p_y0 = snoiseVec3( p - dy );
vec3 p_y1 = snoiseVec3( p + dy );
vec3 p_z0 = snoiseVec3( p - dz );
vec3 p_z1 = snoiseVec3( p + dz );

float x = p_y1.z - p_y0.z - p_z1.y + p_z0.y;
float y = p_z1.x - p_z0.x - p_x1.z + p_x0.z;
float z = p_x1.y - p_x0.y - p_y1.x + p_y0.x;

const float divisor = 1.0 / ( 2.0 * e );
return normalize( vec3( x , y , z ) * divisor );
}`

const shaderSimulationPosition = `
uniform float delta;

void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 position = texture2D(texturePosition, uv).xyz;
vec3 velocity = texture2D(textureVelocity, uv).xyz;

gl_FragColor = vec4(position + velocity * delta, 1.0);
}`;

const shaderSimulationVelocity = `
${shaderPartialCurlNoise}

void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 position = texture2D(texturePosition, uv).xyz;
vec3 velocity = texture2D(textureVelocity, uv).xyz;
vec3 acceleration = curlNoise(position);

gl_FragColor = vec4(curlNoise((position) * .25), 1.0);
}`;

const shaderPointFragment = `
void main() {
gl_FragColor = vec4(1.0, 0.25, 0.0, 1.0);
}`;

const shaderPointVertex = `
attribute vec2 reference;
uniform sampler2D texturePosition;

void main() {
vec3 position = texture2D(texturePosition, reference).xyz;

${THREE.ShaderChunk.begin_vertex}
${THREE.ShaderChunk.project_vertex}

gl_PointSize = 8.0 * (1.0 / -mvPosition.z);
}`;

const TEXTURE_SIZE = 512;
const TEXTURE_HEIGHT = TEXTURE_SIZE;
const TEXTURE_WIDTH = TEXTURE_SIZE;

let previousFrame = Date.now() / 1000;

const cameraFar = Math.pow(2, 16);
const camera = new THREE.PerspectiveCamera(45, 1, 0.001, cameraFar);
camera.position.z = 8;

const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({
antialias: true,
});

renderer.setPixelRatio(window.devicePixelRatio);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

const particles = ((points) => {
const vertices = new Float32Array(points * 3).fill(0);
const references = new Float32Array(points * 2);

for (let i = 0; i < references.length; i += 2) {
const indexVertex = i / 2;

references[i] = (indexVertex % TEXTURE_WIDTH) / TEXTURE_WIDTH;
references[i + 1] = Math.floor(indexVertex / TEXTURE_WIDTH) / TEXTURE_HEIGHT;
}

const geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('reference', new THREE.BufferAttribute(references, 2));

const material = new THREE.ShaderMaterial({
uniforms: {
texturePosition: { value: null },
},
fragmentShader: shaderPointFragment,
vertexShader: shaderPointVertex,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
transparent: true,
});

return new THREE.Points(geometry, material);
})(TEXTURE_WIDTH * TEXTURE_HEIGHT);

scene.add(particles);

const gpuComputationRenderer = new GPUComputationRenderer(TEXTURE_WIDTH, TEXTURE_HEIGHT, renderer);

const dataPosition = gpuComputationRenderer.createTexture();
const dataVelocity = gpuComputationRenderer.createTexture();
const textureArraySize = TEXTURE_WIDTH * TEXTURE_HEIGHT * 4;

const birandom = () => Math.random() * 2 - 1;

for (let i = 0; i < textureArraySize; i += 4) {
const radius = (1 - Math.pow(Math.random(), 3)) * 1;
const azimuth = Math.random() * Math.PI;
const inclination = Math.random() * Math.PI * 2;

dataPosition.image.data[i] = radius * Math.sin(azimuth) * Math.cos(inclination);
dataPosition.image.data[i + 1] = radius * Math.sin(azimuth) * Math.sin(inclination);
dataPosition.image.data[i + 2] = radius * Math.cos(azimuth);
dataPosition.image.data[i + 3] = 1;

dataVelocity.image.data[i] = 0;
dataVelocity.image.data[i + 1] = 0;
dataVelocity.image.data[i + 2] = 0;
dataVelocity.image.data[i + 3] = 1;
}

const variableVelocity = gpuComputationRenderer
.addVariable('textureVelocity', shaderSimulationVelocity, dataVelocity);
const variablePosition = gpuComputationRenderer
.addVariable('texturePosition', shaderSimulationPosition, dataPosition);

variablePosition.material.uniforms.delta = { value: 0 };

gpuComputationRenderer
.setVariableDependencies(variableVelocity, [ variableVelocity, variablePosition ]);
gpuComputationRenderer
.setVariableDependencies(variablePosition, [ variableVelocity, variablePosition ]);

variablePosition.wrapS = THREE.RepeatWrapping;
variablePosition.wrapT = THREE.RepeatWrapping;
variableVelocity.wrapS = THREE.RepeatWrapping;
variableVelocity.wrapT = THREE.RepeatWrapping;

const gpuComputationRendererError = gpuComputationRenderer.init();

if (gpuComputationRendererError) {
console.error('ERROR', gpuComputationRendererError);
}

const resize = (
width = window.innerWidth,
height = window.innerHeight
) => {
camera.aspect = width / height;
camera.updateProjectionMatrix();

renderer.setSize(width, height);
};

const render = (delta) => {
gpuComputationRenderer.compute();

variablePosition.material.uniforms.delta.value = Math.min(delta, 0.5);

particles.material.uniforms.texturePosition.value = gpuComputationRenderer
.getCurrentRenderTarget(variablePosition).texture;

renderer.render(scene, camera);
};

const animate = () => {
requestAnimationFrame(animate);

const now = Date.now() / 1000;
const delta = now - previousFrame;
previousFrame = now;

render(delta);
};

document.body.appendChild(renderer.domElement);
window.addEventListener('resize', () => resize());

resize();
animate();
</script>
[/code]


Thanks,
LC
User: Paul-RAGESW 5 years ago
I don't believe there are any changes that would affect this.

Can you share your website URL where you are having issues so I can take a look?

-------------------------------
Paul
EverWeb Developer
User: Les C. 5 years ago
-- Paul
Thanks for your reply.

Here you go: http://


LC

Last edit 5 years ago
User: Les C. 5 years ago
    

Last edit 5 years ago
User: Paul-RAGESW 5 years ago
Hi LC,

I went to your website and checked there Safari Error log. I see this;

'TypeError: renderer.getRenderTarget is not a function. (In 'renderer.getRenderTarget()', 'renderer.getRenderTarget' is undefined)'

It is on line 337 in this script you added to your website: GPUComputationRenderer.js'

It seems that there is an error in that script you added to your website. I am not familiar with it and the code is very complex. It could have been a browser update or a change in the configuration of the script that you have made. Nothing that I know of changed in EverWeb.

I am sorry I can't be of more help in this case with this particular script.

If you tell me what you are trying to accomplish, perhaps I can offer an easier or different solution.

-------------------------------
Paul
EverWeb Developer
✔ Best Answer  
User: Les C. 5 years ago
-- Paul
Thanks for your feedback. That got it working. Much appreciated!

Best,

Les

Last edit 4 years ago
User: Les C. 5 years ago
                

Last edit 5 years ago
User: Les C. 4 years ago
Solved.

Last edit 4 years ago
User: Les C. 4 years ago
     

Last edit 4 years ago


Post Reply
You must login or signup to post.