1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-06-27 16:35:57 +00:00
forgejo/web_src/css
Alex Smith 690532efb8 add model viewer for .glb (GLTF) model in file view (#8111)
## Motivation

The GLTF (`.gltf`, `.glb`) 3D model format is very popular for game development and visual productions.

For an indie game studio, it would be convenient for a team to view textured 3D models directly from the Forgejo interface (otherwise they need to be downloaded and opened). [Perforce](https://www.perforce.com/products/helix-dam), [Diversion](https://www.diversion.dev/), and GitHub all have this capability to differing extents.

Some discussion on 3D file support here: https://codeberg.org/forgejo/forgejo/issues/5188

## Changes

Adds a model viewer similar to [GitHub STL viewer](https://github.com/assimp/assimp/blob/master/test/models/STL/Spider_ascii.stl) for `.glb` model files, and lays some groundwork to support future files. Uses the [model-viewer](https://modelviewer.dev/) library by Google and three.js. The model viewer is interactive and can be rotated and scaled.

![Screen Recording 2025-06-08 at 15.27.15](/attachments/84c63dea-a0ce-45f9-b48b-c80867636639)

## How to Test

1) Create a new repository or use an existing one.
2) Upload a `.glb` file such as `tests/testdata/data/viewer/Unicode❤♻Test.glb` (CC0 1.0 Universal)
3) View the file in the repository.
    - Similar to image files, the 3D model should be rendered in a viewer.
    - Use mouse clicks to turn and zoom.

## Licenses

Libraries used for this change include three.js and @google/model-viewer, which are MIT and Apache-2.0 licenses respectively. Both of these are compatible with Forgejo's GPL3.0 license.

## Future Plans

1) `.gltf` was not attempted because it is a multiple file format, referencing other files in the same directory. Still need to experiment with this to see if it can work. `.glb` is a single file containing a `.gltf` and all of its other file/texture dependencies so was easier to implement.
2) The PR diff still shows the model as an unviewable bin file, but clicking the "View File" button takes you to a view screen where this model viewer is used. It would be nice to view the before and after of the model in two side-by-side model viewers, akin to reviewing a change in an image.
3) Also inserted stubs for adding contexts for GLTF, STL, OBJ, and 3MF. These ultimately don't do anything yet as only `.glb` files can be detected by the type sniffer of all of these.

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests

- I added test coverage for checking GLB file content using the first few bytes.
  - [x] in their respective `typesniffer_test.go` for unit tests.

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [ ] I do not want this change to show in the release notes.
- [ ] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.

<!--start release-notes-assistant-->

## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
  - [PR](https://codeberg.org/forgejo/forgejo/pulls/8111): <!--number 8111 --><!--line 0 --><!--description YWRkIG1vZGVsIHZpZXdlciBmb3IgYC5nbGJgIChHTFRGKSBtb2RlbCBpbiBmaWxlIHZpZXc=-->add model viewer for `.glb` (GLTF) model in file view<!--description-->
<!--end release-notes-assistant-->

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8111
Reviewed-by: oliverpool <oliverpool@noreply.codeberg.org>
Co-authored-by: Alex Smith <amsmith.pro@pm.me>
Co-committed-by: Alex Smith <amsmith.pro@pm.me>
2025-06-21 14:42:35 +02:00
..
chroma [Port] gitea#30014: Various code view improvements 2024-03-28 16:43:14 +01:00
codemirror Remove EasyMDE focus outline on text (#25328) 2023-06-18 04:10:07 +00:00
editor fix(ui): ensure consistent switch position in markdown editor (#7492) 2025-04-09 17:37:46 +00:00
features chore(ui): clean up hashbox CSS, small design changes (#7822) 2025-05-25 12:51:27 +02:00
markup feat(ui): global styling for kbd tag (#7958) 2025-06-10 22:59:24 +02:00
modules fix(ui): ensure same width of usercards in grid (#6799) 2025-05-25 13:31:53 +02:00
repo fix(ui): change escaping button bg on selected lines (#7944) 2025-05-28 05:16:19 +02:00
shared fix(ui): improve milestone/project header consistency (#7174) 2025-03-09 16:24:52 +00:00
standalone Add toasts to UI (#25449) 2023-06-27 02:45:24 +00:00
themes feat(ui): redesign migration selection screen (#6795) 2025-04-19 13:51:35 +00:00
actions.css Add support for workflow_dispatch (#3334) 2024-06-28 05:17:11 +00:00
admin.css User details page (#26713) 2023-08-31 11:21:18 +02:00
base.css feat(ui): global styling for kbd tag (#7958) 2025-06-10 22:59:24 +02:00
dashboard.css feat(ui): welcome screen for user dashboard (#7030) 2025-02-23 08:41:31 +00:00
explore.css [Port] gitea#29982 Introduce .secondary-nav and handle .page-content spacing universally 2024-03-28 16:43:09 +01:00
font_i18n.css Fix @font-face overrides (#24855) 2023-05-24 01:48:51 +00:00
form.css feat!: Abusive content reporting (#6977) 2025-05-18 08:05:16 +00:00
helpers.css Merge pull request 'Replace gt-word-break with tw-break-anywhere' (#4102) from 0ko/forgejo:ui-replace-gt-word-break into forgejo 2024-06-11 10:39:03 +00:00
home.css fix(ui): center footer links (#7925) 2025-05-22 15:27:00 +02:00
index.css fix(ui): change escaping button bg on selected lines (#7944) 2025-05-28 05:16:19 +02:00
install.css UI improvements to optional sections in installation page (#4062) 2024-06-07 17:57:54 +00:00
migrate.css feat(ui): redesign migration selection screen (#6795) 2025-04-19 13:51:35 +00:00
org.css Remove unneccessary uses of word-break: break-all (#31637) 2024-07-22 15:50:57 +02:00
repo.css add model viewer for .glb (GLTF) model in file view (#8111) 2025-06-21 14:42:35 +02:00
review.css fix(ui): put buttons in a single row on mobile 2024-11-25 18:43:09 +05:00
user.css feat!: Abusive content reporting (#6977) 2025-05-18 08:05:16 +00:00