Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support 3d Rendering via 3d-viewer with SvgRenderer #166

Open
wants to merge 29 commits into
base: main
Choose a base branch
from

Conversation

DrSensor
Copy link

@DrSensor DrSensor commented Jan 14, 2025

close #138
/claim #138

Warning

This draft has some sorcery. (review with caution!)
if Copilot (or other AI) hallucinated, try: git blame, https://githistory.xyz, or https://semanticdiff.com

Important

server side usage require DOM emulation

usage

bun add circuit-to-svg @tscircuit/3d-viewer @happy-dom/global-registrator
import { GlobalRegistrator } from "@happy-dom/global-registrator"
GlobalRegistrator.register()

import { CircuitJsonTo3dSvg } from "circuit-to-svg/3d"

Copy link

vercel bot commented Jan 14, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
circuit-to-svg ❌ Failed (Inspect) Jan 27, 2025 6:17am

@DrSensor
Copy link
Author

gonna create an issue on how to refactor @tscircuit/3d-viewer so the renderer can be swapped

Copy link
Contributor

@techmannih techmannih left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DrSensor please rssolve conflicts

@seveibar
Copy link
Contributor

@techmannih no need to review for things like conflicts, linting etc. while a PR is in draft! drsensor is a smart guy i think he's still putting together the PR

@seveibar
Copy link
Contributor

This is looking great, before we merge we may want to do a quick bundle size comparison. I'm also wondering if we can avoid the patches to the libraries.

@DrSensor
Copy link
Author

the patch in three-stdlib is trivial so I think we can create a PR to their repo. (somehow they use IIFE)

as for @react-three/fiber, I think there is something wrong with bun
https://bun.sh/docs/runtime/modules#importing-packages
Screenshot_20250115-115907.png
hopefully they don't hardcode React stuff as special case 😅


oh wait, this might work. bundle it before running the bun test. the caveat is all ./tests/**.test.* must be refactored (just need to change import statement to import from ./dist/index.js)

@seveibar
Copy link
Contributor

Not 100% sure I understand the issue with react three fiber, but we could explicitly change the import to whatever import we need to avoid Bun's resolution right? I might be confused

image

@seveibar
Copy link
Contributor

Oh another random note, one way we can avoid messing up servers that use circuit-to-svg etc. is by having this being another export, so we could have people who want to use 3d stuff do circuit-to-svg/3d

That would be nice because we do render a lot of svgs on the server for snippets!

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 456K
  • Difference: +116

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.19mb
  • Difference: +196.30

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.19mb, 18716 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          212 │ 197.54mb │ 17727 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 456K
  • Difference: +116

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18716 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          212 │ 197.54mb │ 17727 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@DrSensor DrSensor force-pushed the convertCircuitJsonTo3dSvg branch from 90626cd to d7d3579 Compare January 19, 2025 00:17
@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 456K
  • Difference: +116

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18716 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          210 │ 197.28mb │ 17489 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 476K
  • Difference: +136

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18723 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          212 │ 197.54mb │ 17727 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 468K
  • Difference: +128

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18720 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          212 │ 197.54mb │ 17727 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 468K
  • Difference: +128

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18720 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          210 │ 197.28mb │ 17489 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@tscircuitbot
Copy link

Size Report

Bundle Size

  • Base branch size: 340K
  • PR branch size: 468K
  • Difference: +128

Install Size

  • Base branch size: 10.89mb
  • PR branch size: 207.18mb
  • Difference: +196.29

Full Howfat Output (PR Branch)

[email protected] (234 deps, 207.18mb, 18720 files, ©undefined)
╭───────────────────────────────┬──────────────┬──────────┬───────┬───────────┬───────────┬───────────╮
│ Name                          │ Dependencies │     Size │ Files │ Native    │ License   │ Deprec    │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected] │            2 │ 995.31kb │    73 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]      │            7 │   1.86mb │   453 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @tscircuit/[email protected]   │            1 │ 329.98kb │    31 │           │ ISC       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ @types/[email protected]           │            1 │   2.26mb │   117 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │          212 │ 197.54mb │ 17727 │           │           │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]              │            5 │   5.59mb │   516 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]                  │            7 │ 123.63kb │    41 │           │ MIT       │           │
├───────────────────────────────┼──────────────┼──────────┼───────┼───────────┼───────────┼───────────┤
│ [email protected]  │              │ 430.45kb │    56 │           │ MIT       │           │
╰───────────────────────────────┴──────────────┴──────────┴───────┴───────────┴───────────┴───────────╯

@seveibar
Copy link
Contributor

@DrSensor curious how this PR is going, we're using SVGs in all of our docs now and I think it'd be sick to have 3d as a selectable option- i would even default to 3d being the default tab a lot of the time

https://docs.tscircuit.com/

image

@DrSensor DrSensor marked this pull request as ready for review January 27, 2025 06:17
@DrSensor DrSensor requested a review from imrishabh18 as a code owner January 27, 2025 06:17
@DrSensor
Copy link
Author

it should be okay now to use on server-side despite some bundler trick in vite.config.js 😅
the next step would be working on tscircuit/3d-viewer#115 to remove the github specifier in 👇🏽 along with hard-coded change in 3d-viewer

"optionalDependencies": {
"@tscircuit/3d-viewer": "github:tscircuit/3d-viewer#v0.0.81"
},

@imrishabh18 imrishabh18 requested a review from seveibar January 27, 2025 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Experiment: Support 3d Rendering via 3d-viewer with SvgRenderer
4 participants