Loading video...

Video Failed to Load

Go Home

Trying to pixelize 3d objects with optional color palettes and dithering using WebGL. Using TweakPane for GUI. WebGLで3D形状をピクセル化する試み。 #webgl #threejs

jhorikawa_err's profile picture

Junichiro Horikawa

15,565 subscribers

27,374 views • 1 year ago •via X (Twitter)

ArtsScience & TechnologyEducation#webgl#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

9 Comments

Junichiro Horikawa's profile picture
Junichiro Horikawa1 year ago

It took a lot of time for me to detect inner edges (used depth and normal map in the end)

Ryo Lu's profile picture
Ryo Lu1 year ago

so good can you share the code

VR Me Up - VR World Builder's profile picture
VR Me Up - VR World Builder1 year ago

Great effect, Looks fantastic🙂

Fatih Yonucuoğlu's profile picture
Fatih Yonucuoğlu1 year ago

cool

Capauri's profile picture
Capauri1 year ago

this is so sick

VP's profile picture
VP1 year ago

This is really good

Alex : Subsocial's profile picture
Alex : Subsocial1 year ago

So cool 👍

Jon Shamir's profile picture
Jon Shamir1 year ago

sweet! nostalgic vibes

Andrey's profile picture
Andrey1 year ago

Beatiful

Related Videos

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders
0:30

i made a 3D stained glass type design tool it renders live in the browser using threejs and webgl shaders

AA

47,343 views • 1 month ago

It was great to work on this one w/ Resn, especially on that "Molten Grid" effect using WebGL and SDF — #webGL #threejs #UI
0:20

It was great to work on this one w/ Resn, especially on that "Molten Grid" effect using WebGL and SDF — #webGL #threejs #UI

Giom

20,229 views • 1 year ago

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning
1:05

🎮 React Three Game on Three.js Resources Learn how to build 3D games using React Three Fiber and #threejs. A great starting point for understanding game logic, interactivity, and real-time 3D on the web. 👉 #threejs #WebGL #GameDev #ReactThreeFiber #3D #Learning

Three.js Resources

15,838 views • 4 months ago

Particles in 3D Models (OBJ/FBX) Demo and Source Code: #threejs Three.js #webgl #particles #3dmodeling
0:49

Particles in 3D Models (OBJ/FBX) Demo and Source Code: #threejs Three.js #webgl #particles #3dmodeling

Sabo Sugi

10,653 views • 4 months ago

Optical flow, fluid dynamics, refraction with lots and lots of render targets in WebGL #threejs #webgl
0:24

Optical flow, fluid dynamics, refraction with lots and lots of render targets in WebGL #threejs #webgl

Aj

657,581 views • 2 years ago

TouchDesignerでよく見るやつをWebGLでやってみたシリーズ Mediapipeを使って Glass effect を試してみた。 両手ピンチ：拡大縮小 左手クリック：模様替え 右手ドラッグ：Glassオブジェクトを移動 #webgl #glsl #threejs #touchdesigner
0:20

TouchDesignerでよく見るやつをWebGLでやってみたシリーズ Mediapipeを使って Glass effect を試してみた。 両手ピンチ：拡大縮小 左手クリック：模様替え 右手ドラッグ：Glassオブジェクトを移動 #webgl #glsl #threejs #touchdesigner

Shoya Kajita

28,532 views • 2 months ago

#webgl Texture recursion effect using render targets of threejs. Render targets are capable of creating really cool stuff. #threejs #shaders
0:21

#webgl Texture recursion effect using render targets of threejs. Render targets are capable of creating really cool stuff. #threejs #shaders

Refaay

59,335 views • 2 years ago

After few adjustments and thanks to #threejs TSL 💙🙏 this experiment runs on #webgpu and #webgl ! Try it with firefox to test webgl fallback : Source :
0:20

After few adjustments and thanks to #threejs TSL 💙🙏 this experiment runs on #webgpu and #webgl ! Try it with firefox to test webgl fallback : Source :

Kevin Levron

25,227 views • 11 months ago

👋 I'm available again for freelance. Looking for a WebGL ~ 2D/3D ~ front-end (any framework) project starting now 🙏 #freelance #frontend #developer #webgl
0:50

👋 I'm available again for freelance. Looking for a WebGL ~ 2D/3D ~ front-end (any framework) project starting now 🙏 #freelance #frontend #developer #webgl

Robin Payot

16,757 views • 2 years ago

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl
0:21

Well… things escalated fast. This started as me re-purposing dusty / rejected Figma concepts to study page transitions using WebGL + Taxi. Somehow it turned into a mini site with… a lot going on. Live: #webflow #threejs #gsap #webgl

Bimo Tri. P

13,587 views • 6 months ago

⚡ GLTF Optimizer Optimize your 3D models for the web in seconds. Reduce file size, improve performance, and keep your #threejs scenes smooth all without losing quality. Perfect for faster 3D workflows. 👉 Creator: Simon #threejs #WebGL #3D #Optimization #Workflow #Performance #3DDev
0:41

⚡ GLTF Optimizer Optimize your 3D models for the web in seconds. Reduce file size, improve performance, and keep your #threejs scenes smooth all without losing quality. Perfect for faster 3D workflows. 👉 Creator: Simon #threejs #WebGL #3D #Optimization #Workflow #Performance #3DDev

Three.js Resources

18,026 views • 4 months ago

SuperGrok is insanely powerful. Use the file chat feature and talk to your code in real time. Coded this 3D model of helmet for a game asset using threejs and webgl with Grok 4. The file chat allowed me to add lighting and color controls just like that. It felt surreal. Try it now.
0:46

SuperGrok is insanely powerful. Use the file chat feature and talk to your code in real time. Coded this 3D model of helmet for a game asset using threejs and webgl with Grok 4. The file chat allowed me to add lighting and color controls just like that. It felt surreal. Try it now.

Prashant

1,273,545 views • 9 months ago

3d is nice but #webgl images I really like
0:27

3d is nice but #webgl images I really like

👀

45,797 views • 1 year ago

I've gotten contour and latitude / longitude lines working with ellipsoidal tile sets in 3D Tiles Renderer - demo link below! 🌎✨ #threejs #webgl #3dtiles #gis #cesiumgrant
0:23

I've gotten contour and latitude / longitude lines working with ellipsoidal tile sets in 3D Tiles Renderer - demo link below! 🌎✨ #threejs #webgl #3dtiles #gis #cesiumgrant

Garrett Johnson

40,351 views • 1 year ago

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding
0:36

Small weekend project. Modified Brackeys's Unity dissolve shader to work in #ThreeJS using R3F. Will be using this in AR soon👀 Demo: Code: #webgl #creativecoding

Faraz

111,070 views • 2 years ago

Transform your ideas into 3D with ease! 🎨✨ Tripo AI uses AI to help you create 3D models in no time. is this the future of 3d design? 🚀 Check it out: #Threejs #WebGL #AI
1:22

Transform your ideas into 3D with ease! 🎨✨ Tripo AI uses AI to help you create 3D models in no time. is this the future of 3d design? 🚀 Check it out: #Threejs #WebGL #AI

Three.js Resources

58,819 views • 1 year ago

Aurum Leaf Demo and Source Code: #threejs #webgl #creativecoding
0:39

Aurum Leaf Demo and Source Code: #threejs #webgl #creativecoding

Sabo Sugi

12,523 views • 1 month ago

Wave Lights Demo and Source Code: #threejs #webgl #shader
0:38

Wave Lights Demo and Source Code: #threejs #webgl #shader

Sabo Sugi

24,312 views • 1 month ago

🔥 enhance-shader-lighting is released! 🔥 ⮕ Demo: 3 example scenes with baked lightmaps and "enhanced lighting" through modified shaders. ⮕ GitHub: #threejs #webdev #3D #javascript #Graphics #webgl
0:24

🔥 enhance-shader-lighting is released! 🔥 ⮕ Demo: 3 example scenes with baked lightmaps and "enhanced lighting" through modified shaders. ⮕ GitHub: #threejs #webdev #3D #javascript #Graphics #webgl

0beqz

85,149 views • 3 years ago