GLSL Hills

Size
6,991 Kb
Views
32,384

How do I make an glsl hills?

What is a glsl hills? How do you make a glsl hills? This script and codes were developed by Yoichi Kobayashi on 26 August 2022, Friday.

GLSL Hills Previews

GLSL Hills - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GLSL Hills</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="p-summary"> <h1>GLSL Hills</h1> <p><a href="http://www.tplh.net/">this source.</a></p>
</div>
<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas> <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>

GLSL Hills - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Ropa+Sans");
.p-summary { position: absolute; top: 5%; left: 5%; z-index: 2; font-family: 'Ropa Sans';
}
.p-summary h1 { font-weight: 400; letter-spacing: 0.2em;
}
.p-summary p { letter-spacing: 0.2em;
}
.p-summary a { color: #333;
}
.p-canvas-webgl { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
}

GLSL Hills - Script Codes JS Codes

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Plane = function () { function Plane() { _classCallCheck(this, Plane); this.uniforms = { time: { type: 'f', value: 0 } }; this.mesh = this.createMesh(); this.time = 1; } Plane.prototype.createMesh = function createMesh() { return new THREE.Mesh(new THREE.PlaneGeometry(256, 256, 256, 256), new THREE.RawShaderMaterial({ uniforms: this.uniforms, vertexShader: "#define GLSLIFY 1\nattribute vec3 position;\n\nuniform mat4 projectionMatrix;\nuniform mat4 modelViewMatrix;\nuniform float time;\n\nvarying vec3 vPosition;\n\nmat4 rotateMatrixX(float radian) {\n return mat4(\n 1.0, 0.0, 0.0, 0.0,\n 0.0, cos(radian), -sin(radian), 0.0,\n 0.0, sin(radian), cos(radian), 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n}\n\n//\n// GLSL textureless classic 3D noise \"cnoise\",\n// with an RSL-style periodic variant \"pnoise\".\n// Author: Stefan Gustavson ([email protected])\n// Version: 2011-10-11\n//\n// Many thanks to Ian McEwan of Ashima Arts for the\n// ideas for permutation and gradient selection.\n//\n// Copyright (c) 2011 Stefan Gustavson. All rights reserved.\n// Distributed under the MIT license. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 mod289(vec4 x)\n{\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec4 permute(vec4 x)\n{\n return mod289(((x*34.0)+1.0)*x);\n}\n\nvec4 taylorInvSqrt(vec4 r)\n{\n return 1.79284291400159 - 0.85373472095314 * r;\n}\n\nvec3 fade(vec3 t) {\n return t*t*t*(t*(t*6.0-15.0)+10.0);\n}\n\n// Classic Perlin noise\nfloat cnoise(vec3 P)\n{\n vec3 Pi0 = floor(P); // Integer part for indexing\n vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1\n Pi0 = mod289(Pi0);\n Pi1 = mod289(Pi1);\n vec3 Pf0 = fract(P); // Fractional part for interpolation\n vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0\n vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n vec4 iy = vec4(Pi0.yy, Pi1.yy);\n vec4 iz0 = Pi0.zzzz;\n vec4 iz1 = Pi1.zzzz;\n\n vec4 ixy = permute(permute(ix) + iy);\n vec4 ixy0 = permute(ixy + iz0);\n vec4 ixy1 = permute(ixy + iz1);\n\n vec4 gx0 = ixy0 * (1.0 / 7.0);\n vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;\n gx0 = fract(gx0);\n vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n vec4 sz0 = step(gz0, vec4(0.0));\n gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n vec4 gx1 = ixy1 * (1.0 / 7.0);\n vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;\n gx1 = fract(gx1);\n vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n vec4 sz1 = step(gz1, vec4(0.0));\n gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n g000 *= norm0.x;\n g010 *= norm0.y;\n g100 *= norm0.z;\n g110 *= norm0.w;\n vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n g001 *= norm1.x;\n g011 *= norm1.y;\n g101 *= norm1.z;\n g111 *= norm1.w;\n\n float n000 = dot(g000, Pf0);\n float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n float n111 = dot(g111, Pf1);\n\n vec3 fade_xyz = fade(Pf0);\n vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n return 2.2 * n_xyz;\n}\n\nvoid main(void) {\n vec3 updatePosition = (rotateMatrixX(radians(90.0)) * vec4(position, 1.0)).xyz;\n float sin1 = sin(radians(updatePosition.x / 128.0 * 90.0));\n vec3 noisePosition = updatePosition + vec3(0.0, 0.0, time * -30.0);\n float noise1 = cnoise(noisePosition * 0.08);\n float noise2 = cnoise(noisePosition * 0.06);\n float noise3 = cnoise(noisePosition * 0.4);\n vec3 lastPosition = updatePosition + vec3(0.0,\n noise1 * sin1 * 8.0\n + noise2 * sin1 * 8.0\n + noise3 * (abs(sin1) * 2.0 + 0.5)\n + pow(sin1, 2.0) * 40.0, 0.0);\n\n vPosition = lastPosition;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(lastPosition, 1.0);\n}\n", fragmentShader: "precision highp float;\n#define GLSLIFY 1\n\nvarying vec3 vPosition;\n\nvoid main(void) {\n float opacity = (96.0 - length(vPosition)) / 256.0 * 0.6;\n vec3 color = vec3(0.6);\n gl_FragColor = vec4(color, opacity);\n}\n", transparent: true })); }; Plane.prototype.render = function render(time) { this.uniforms.time.value += time * this.time; }; return Plane;
}();
var canvas = document.getElementById('canvas-webgl');
var renderer = new THREE.WebGLRenderer({ antialias: false, canvas: canvas
});
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
var clock = new THREE.Clock();
var plane = new Plane();
var resizeWindow = function resizeWindow() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);
};
var on = function on() { $(window).on('resize', function () { resizeWindow(); });
};
var render = function render() { plane.render(clock.getDelta()); renderer.render(scene, camera);
};
var renderLoop = function renderLoop() { render(); requestAnimationFrame(renderLoop);
};
var init = function init() { renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xeeeeee, 1.0); camera.position.set(0, 16, 128); camera.lookAt(new THREE.Vector3(0, 28, 0)); scene.add(plane.mesh); on(); resizeWindow(); renderLoop();
};
init();
GLSL Hills - Script Codes
GLSL Hills - Script Codes
Home Page Home
Developer Yoichi Kobayashi
Username ykob
Uploaded August 26, 2022
Rating 4.5
Size 6,991 Kb
Views 32,384
Do you need developer help for GLSL Hills?

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!

Yoichi Kobayashi (ykob) Script Codes
Name
The wriggle sphere
GLSL Glitch
Glow
Butterfly
Typed Arrays Test
Slime
Glsl-dissolve
GLSL Core
Gravity Test
GPGPU Particles Ver2
Create amazing blog posts 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!