Last active
December 15, 2023 17:33
-
-
Save ShaneDrury/262424bc3b9a84be5ac1234af18a29b6 to your computer and use it in GitHub Desktop.
Very simple GLSL with three.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>GLSL demo</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-size: 0; | |
| } | |
| canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/[email protected]/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <script id="vertexShader" type="x-shader/x-vertex"> | |
| void main() { | |
| gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); | |
| } | |
| </script> | |
| <script id="fragmentShader" type="x-shader/x-fragment"> | |
| void main() { | |
| gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0); | |
| } | |
| </script> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| const WIDTH = window.innerWidth; | |
| const HEIGHT = window.innerHeight; | |
| const renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(WIDTH, HEIGHT); | |
| renderer.setClearColor(0xdddddd, 1); | |
| document.body.appendChild(renderer.domElement); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT); | |
| camera.position.z = 50; | |
| scene.add(camera); | |
| const boxGeometry = new THREE.BoxGeometry(10, 10, 10); | |
| const shaderMaterial = new THREE.ShaderMaterial({ | |
| vertexShader: document.getElementById("vertexShader").textContent, | |
| fragmentShader: document.getElementById("fragmentShader").textContent, | |
| }); | |
| const cube = new THREE.Mesh(boxGeometry, shaderMaterial); | |
| scene.add(cube); | |
| cube.rotation.set(0.4, 0.2, 0); | |
| function render() { | |
| requestAnimationFrame(render); | |
| renderer.render(scene, camera); | |
| } | |
| render(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment