Skip to content

Commit

Permalink
feat: create obscured
Browse files Browse the repository at this point in the history
  • Loading branch information
GuillaumeCatelSoyhuce committed Jan 7, 2024
1 parent b239d32 commit e3db301
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 0 deletions.
59 changes: 59 additions & 0 deletions src/obscured/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import React, { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

import { Scene } from './obscured'

import NoiseTexture from './noise-texture.svg?url'

interface Props {
scale: number
}

const Obscured = ({ scale = 5 }: Props) => {
const canvas = useRef<HTMLCanvasElement>(null)

const handleCanvasClick = () => {
if (canvas.current) {
canvas.current.toBlob(
(blob) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(blob as Blob)
link.download = `${Date.now().toString()}.webp`
link.click()
},
'image/webp',
1
)
}
return false
}

return (
<div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
<Canvas
camera={{ zoom: 1 }}
gl={{ preserveDrawingBuffer: true }}
onDoubleClick={handleCanvasClick}
ref={canvas}
style={{ width: '100%', height: '100%' }}
>
<Scene scale={scale} />
<OrbitControls />
</Canvas>
<div
style={{
opacity: 0.2,
width: '100%',
height: '100%',
position: 'absolute',
inset: 0,
pointerEvents: 'none',
backgroundImage: `url(${NoiseTexture})`
}}
></div>
</div>
)
}

export { Obscured }
7 changes: 7 additions & 0 deletions src/obscured/noise-texture.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/obscured/obscured.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react'

Check warning on line 1 in src/obscured/obscured.stories.tsx

View workflow job for this annotation

GitHub Actions / lint

'React' is defined but never used
import type { Meta, StoryObj } from '@storybook/react'

import { Obscured } from '.'

const meta: Meta<typeof Obscured> = {
title: '3D/Obscured',
component: Obscured,
argTypes: {
scale: {
control: { type: 'number' }
}
}
}

export default meta

type Story = StoryObj<typeof Obscured>

export const Primary: Story = {}
56 changes: 56 additions & 0 deletions src/obscured/obscured.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/* eslint-disable react/no-unknown-property */
import React, { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { BoxGeometry, Mesh, ShaderMaterial } from 'three'

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { sculptToThreeJSMesh } from 'shader-park-core'

const mesh: Mesh = sculptToThreeJSMesh(`
let strength = input(0.4, 0, 3);
let twistMix = input();
setStepSize(.3);
rotateY(time * .2);
let warpedSpace = warpSpace(getSpace());
metal(1.9);
shine(1);
color(0,0,0,0);
sphere(.75 + length(warpedSpace) * .2);
function warpSpace(s) {
let t = time / 4.;
rotateY(getRayDirection().y * (1 - twistMix) * 12);
s = getSpace().x * 8.0 * (vec3(0.5, .2, .1) + s);
for(let i = 1.0; i < 3.0; i += 1.0) {
s.x = s.x + strength * sin(2.0 * t + i * 1.5 * s.y) + t * 0.5;
s.y = s.y + strength * cos(2.0 * t + i * 2.5 * s.x);
}
return .5 + 0.5 * cos(time + vec3(s.x, s.y, s.x) + vec3(0., 2., 4.));
}
`)

interface Props {
scale: number
}

const Scene = ({ scale }: Props) => {

Check warning on line 39 in src/obscured/obscured.tsx

View workflow job for this annotation

GitHub Actions / lint

'scale' is defined but never used
const el = useRef<Mesh<BoxGeometry, ShaderMaterial>>()

useFrame(() => {
if (el.current) {
el.current.material.uniforms.time.value += 0.1
}
})

return (
<>
<color args={['#000000']} attach='background' />
<primitive object={mesh} ref={el} />
</>
)
}

export { Scene }

0 comments on commit e3db301

Please sign in to comment.