Giter VIP home page Giter VIP logo

noise's Introduction

Project Description

Overall description

The project goes about creating a sphere, and then applying a pseudo-4D noise (3D Noise utilizing time as an input) to deform its surface. Various GUI controls were added to give the project more life.

GUI controls let you:

  1. Change the texture applied onto the sphere (from a fixed set of images)

  2. Change the strength of the Noise

  3. Change the persistence of the octaves of Noise

  4. Change the number of octaves of Noise

  5. Change the field of view of the camera

  6. Change the aspect ratio of the camera

The UVs are updated constantly to make the surface of the sphere seem animated.

Things Done:

main.js description

  1. Created a Icosahedron geometry, which when sub-dived approximates a sphere really well.

  2. Using this approximated sphere and a custom material 'color_Material', I created a sphere mesh, that was added to the scene.

  3. The color_Material contains multiple uniforms (including multiple textures that will be used with different image samplers), that will be passed too the shader to control various aspects. Some of these uniforms were also added to the GUI to increase interactivity. 'color_Material' also holds the creates its own fragment and vertex shaders (all Materials in nodejs do).

  4. All the GUI parameters and uniforms used by the shader are updated to create a dynamic looking scene in 'function onUpdate(framework)'

Shaders

Vertex Shader
  1. The Vertex shader deals with the actual Noise function, using which we deform the position, of that vertex along it's surface normal.

  2. The noise function is a multi-octave noise function, that utilizes a simple hash function to map a 3D point to some unique noise value. The noise function also makes use of a cosine interpolation and smoothing stage to give a less jittery and smooth noise output.

  3. The noise output is just a float value that scales the normal of that vertex and adds this scaled normal to the vertex position.

Fragment Shader
  1. The fragment shader utilizes a flag to determine which image sampler, if any, is to be used to create a colorful deformed sphere at every timestep.

noise's People

Contributors

austineng avatar amansachan1 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.