Julia Vertex Shader

Developer
Tristan
Size
3,012 Kb
Views
28,336
  1. Julia Vertex Shader Previews
  2. Julia Vertex Shader HTML Codes
  3. Julia Vertex Shader CSS Codes
  4. Julia Vertex Shader JS Codes

How do I make an julia vertex shader?

Playing with GLSL and THREE. All sorts of controls, I'll let you discover them.... What is a julia vertex shader? How do you make a julia vertex shader? This script and codes were developed by Tristan on 25 August 2022, Thursday.

Julia Vertex Shader Previews
IQ Test

Julia Vertex Shader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Julia Vertex Shader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="vertex" type="x-shader/x-vertex">	uniform float time;	varying float offset;	void main() {	vec3 c, z, nz, loc;	float speed = 0.25;	float its;	offset = 0.;	c = position / vec3(120.,120.,120.);	z = c;	loc.x = cos(time/4.*speed)/1.9-cos(time/2.*speed)/3.8;	loc.z = sin(time/4.*speed)/1.9-sin(time/2.*speed)/3.8;	for(int itss = 0; itss < 200; itss+=1) {	nz.x = z.x*z.x-z.z*z.z+loc.x;	nz.z = 2.*z.x*z.z+loc.z;	z = nz;	offset = float(itss);	if((z.x*z.x+z.z*z.z) >= 4.)	break;	}	gl_PointSize = 1.6;	gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x, offset, position.z, 1.0);	}
</script> <script id="fragment" type="x-shader/x-fragment">	#ifdef GL_ES	precision lowp float;	#endif	varying float offset;	void main( void ) {	vec4 c1 = vec4(0.,0.,0.,0.);	vec4 c2 = vec4(0.,.5,1.,1.);	c1 += c2*offset/40.;	gl_FragColor = c1;	}
</script> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Julia Vertex Shader - Script Codes CSS Codes

*{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body{font-size:75%;background:#222;font-family:arial;padding:20px 0 0 20px}
canvas{border:1px solid #181818;display:block;box-shadow:0 0 10px #111}

Julia Vertex Shader - Script Codes JS Codes

var w, h, timeStep = 0.003, paused = false, resolution = 1, center = new THREE.Vector3(-20,30,0), renderer, camera, scene, uniforms, attributes;
$(document).ready(function(){ renderer = new THREE.WebGLRenderer( { antialias: true } );	renderer.setPixelRatio( window.devicePixelRatio );	renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.x = 50; camera.position.y = 100; camera.position.z = 100; camera.lookAt(center); updateCamera(); scene = new THREE.Scene(); var fs = document.getElementById("fragment").firstChild.nodeValue; var vs = document.getElementById("vertex").firstChild.nodeValue; uniforms = { time: { type: "f", value: 1.0 } }; var pointGeo = new THREE.Geometry(); for(var x = -200; x < 200; x += resolution){ for(var z = -200; z < 200; z += resolution){ pointGeo.vertices.push(new THREE.Vector3(x, 0, z)); } } pointPlane = new THREE.Points(pointGeo, new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vs, fragmentShader: fs })); scene.add(pointPlane); window.addEventListener('resize', function(e){ updateCamera(); }); window.addEventListener('keyup', function(e){ switch(e.which){ case 32: paused = !paused; break; } }); window.addEventListener('keydown', function(e){ switch(e.which){ case 37: timeStep = e.shiftKey ? -0.03 : -0.003; break; case 39: timeStep = e.shiftKey ? 0.03 : 0.003; break; } if(paused) uniforms.time.value += timeStep; }); window.addEventListener( 'resize', onWindowResize, false ); requestAnimationFrame(animate);
});
function updateCamera(){ w = window.innerWidth - 40; h = window.innerHeight - 40; renderer.setSize(w,h); camera.aspect = w/h; camera.updateProjectionMatrix();
}
function animate(){ //controls.update(); if(!paused) uniforms.time.value += timeStep; renderer.render(scene,camera); requestAnimationFrame(animate);
}
function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight );
}
Julia Vertex Shader - Script Codes
Julia Vertex Shader - Script Codes
Home Page Home
Developer Tristan
Username sinthetyc
Uploaded August 25, 2022
Rating 4
Size 3,012 Kb
Views 28,336
Do you need developer help for Julia Vertex Shader?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tristan (sinthetyc) Script Codes
Name
A Better Colour Picker
Hovering a Hexagon
Kaleidoscope
Iterative Function Tree
Geese
Particle System 7
Particle Interaction
Perspective
Tesla
Light rays
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!