Socket
Socket
Sign inDemoInstall

claygl-advanced-renderer

Package Overview
Dependencies
1
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    claygl-advanced-renderer

Advanced renderer for ClayGL


Version published
Maintainers
1
Install size
3.64 MB
Created

Readme

Source

ClayGL Advanced Renderer

ClayGL advanced renderer provide a full render pipeline which includes:

  • Bloom
  • Screen Space Ambient Occlusion
  • Screen Space Reflection
  • Depth of Field
  • Color Correction
  • ACES Tone Mapping
  • FXAA
  • Temporal Anti-Aliasing
  • Progressive Enhancement on SSAO, SSR, Shadow.

Install from NPM

npm install claygl
npm install claygl-advanced-renderer

Basic Usage

<html>
<head>
  <meta charset="utf-8">
  <script src="../node_modules/claygl/dist/claygl.js"></script>
  <script src="../dist/claygl-advanced-renderer.js"></script>
</head>
<body>
  <div id="main"></div>

  <script type="text/javascript">
    clay.application.create('#main', {
      width: window.innerWidth,
      height: window.innerHeight,

      autoRender: false,

      init: function (app) {
        this._advancedRenderer = new ClayAdvancedRenderer(app.renderer, app.scene, app.timeline, {
          // See full graphic configuration at
          // https://github.com/pissang/claygl-advanced-renderer/blob/master/src/defaultGraphicConfig.js
          shadow: true
        });

        // Create a perspective camera.
        // First parameter is the camera position. Which is in front of the cube.
        // Second parameter is the camera lookAt target. Which is the origin of the world, and where the cube puts.
        this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);

        // Create a sample cube
        this._cube = app.createCube({
          color: 'red'
        });
        // Create a ground
        this._ground = app.createPlane();
        this._ground.rotation.rotateX(-Math.PI / 2);
        this._ground.scale.set(2, 2, 1);

        // Create a directional light. The direction is from top right to left bottom, away from camera.
        this._mainLight = app.createDirectionalLight([-1, -2, -1]);

        this._advancedRenderer.render();
      }
    })
  </script>
</body>
</html>

FAQs

Last updated on 26 Mar 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc