mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-06-27 16:35:57 +00:00
## 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.  ## 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>
63 lines
2.9 KiB
Go HTML Template
63 lines
2.9 KiB
Go HTML Template
{{template "repo/settings/layout_head" (dict "ctxData" . "pageClass" "repository settings lfs")}}
|
|
<div class="user-main-content twelve wide column content repository file list">
|
|
<div class="tab-size-8 non-diff-file-content">
|
|
<h4 class="ui top attached header">
|
|
<a href="{{.LFSFilesLink}}">{{ctx.Locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.LFSFile.Oid}}</span>
|
|
<div class="ui right">
|
|
{{if .EscapeStatus.Escaped}}
|
|
<a class="ui tiny basic button unescape-button tw-hidden">{{ctx.Locale.Tr "repo.unescape_control_characters"}}</a>
|
|
<a class="ui tiny basic button escape-button">{{ctx.Locale.Tr "repo.escape_control_characters"}}</a>
|
|
{{end}}
|
|
<a class="ui primary tiny button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{ctx.Locale.Tr "repo.settings.lfs_findcommits"}}</a>
|
|
</div>
|
|
</h4>
|
|
<div class="ui bottom attached table unstackable segment">
|
|
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
|
|
<div class="file-view{{if .IsMarkup}} markup {{.MarkupType}}{{else if .IsPlainText}} plain-text{{else if .IsTextFile}} code-view{{end}}">
|
|
{{if .IsMarkup}}
|
|
{{if .FileContent}}{{.FileContent | SafeHTML}}{{end}}
|
|
{{else if .IsPlainText}}
|
|
<pre>{{if .FileContent}}{{.FileContent | SafeHTML}}{{end}}</pre>
|
|
{{else if not .IsTextFile}}
|
|
<div class="view-raw">
|
|
{{if .IsImageFile}}
|
|
<img src="{{$.RawFileLink}}" alt="">
|
|
{{else if .IsVideoFile}}
|
|
<video controls src="{{$.RawFileLink}}">
|
|
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>
|
|
</video>
|
|
{{else if .IsAudioFile}}
|
|
<audio controls src="{{$.RawFileLink}}">
|
|
<strong>{{ctx.Locale.Tr "repo.audio_not_supported_in_browser"}}</strong>
|
|
</audio>
|
|
{{else if .IsPDFFile}}
|
|
<div class="pdf-content is-loading" data-src="{{$.RawFileLink}}" data-fallback-button-text="{{ctx.Locale.Tr "repo.diff.view_file"}}"></div>
|
|
{{else if .Is3DModelFile}}
|
|
{{if .IsGLBFile}}
|
|
<model-viewer src="{{$.RawFileLink}}" ar shadow-intensity="2" camera-controls touch-action="pan-y"></model-viewer>
|
|
{{else}}
|
|
<a href="{{$.RawFileLink}}" rel="nofollow">{{ctx.Locale.Tr "repo.file_view_raw"}}!</a>
|
|
{{end}}
|
|
{{else}}
|
|
<a href="{{$.RawFileLink}}" rel="nofollow">{{ctx.Locale.Tr "repo.file_view_raw"}}</a>
|
|
{{end}}
|
|
</div>
|
|
{{else if .FileSize}}
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
{{if .IsFileTooLarge}}
|
|
<td><strong>{{ctx.Locale.Tr "repo.file_too_large"}}</strong></td>
|
|
{{else}}
|
|
<td class="lines-num">{{.LineNums}}</td>
|
|
<td class="lines-code"><pre><code class="{{.HighlightClass}}"><ol>{{.FileContent}}</ol></code></pre></td>
|
|
{{end}}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{template "repo/settings/layout_footer" .}}
|